Link select>option with Onclick of the button. Game of Old

Asked

Viewed 37 times

-1

I would like to link my select box to the function that is called on on click.

I have two options: Player v s Player and CPU vs Player ... the idea is that when someone selects "Player vs Player" the On click of the cell is Function played(p), and when someone selects "Player vs CPU" the Onclick calls the function played)

function jogadaComp(p){
    numJogadas++;
    verificaVez(quemJoga);
    
    if((quemJoga === 0) && (jogoRolando === true)){
        switch(p){
                case 00 :
                if(jogo[0][0] === ''){
                    jogo[0][0] = 'X';
                    quemJoga = 1;
                }; break;
                
                case 01 :
                if(jogo[0][1] === ''){
                    jogo[0][1] = 'X';
                    quemJoga = 1;
                }; break;
                case 02 :
                if(jogo[0][2] === ''){
                    jogo[0][2] = 'X';
                    quemJoga = 1;
                }; break;
                case 10 :
                if(jogo[1][0] === ''){
                    jogo[1][0] = 'X';
                    quemJoga = 1;
                }; break;            
                case 11 :
                if(jogo[1][1] === ''){
                    jogo[1][1] = 'X';
                    quemJoga = 1;
                }; break;            
                case 12 :
                if(jogo[1][2] === ''){
                    jogo[1][2] = 'X';
                    quemJoga = 1;
                }; break;            
                case 20 :
                if(jogo[2][0] === ''){
                    jogo[2][0] = 'X';
                    quemJoga = 1;
                }; break;            
                case 21 :
                if(jogo[2][1] === ''){
                    jogo[2][1] = 'X';
                    quemJoga = 1;
                }; break;            
                case 22 :
                if(jogo[2][2] === ''){
                    jogo[2][2] = 'X';
                    quemJoga = 1;
                }; break;
        }
    }
       
    
    cpuJoga();
    atualizaTabuleiro();
    vitoria = verificaVitoria();
    
    if (vitoria != ''){
        if (quemJoga = 0){
           // alert(vitoria + " Venceu!");
           mensagemWinner(vitoria);
            jogoRolando=false;
        } else {
            mensagemWinner(vitoria);
               // alert(vitoria + " Venceu!");
                jogoRolando=false;
            
        }
    }
}


//// outra função :


function jogada(p){
    numJogadas++
    verificaVez(quemJoga);
    
    if((quemJoga === 0) && (jogoRolando === true)){
        switch(p){
                case 00 :
                if(jogo[0][0] === ''){
                    jogo[0][0] = 'X';
                    quemJoga = 1;
                }; break;
                
                case 01 :
                if(jogo[0][1] === ''){
                    jogo[0][1] = 'X';
                    quemJoga = 1;
                }; break;
                case 02 :
                if(jogo[0][2] === ''){
                    jogo[0][2] = 'X';
                    quemJoga = 1;
                }; break;
                case 10 :
                if(jogo[1][0] === ''){
                    jogo[1][0] = 'X';
                    quemJoga = 1;
                }; break;            
                case 11 :
                if(jogo[1][1] === ''){
                    jogo[1][1] = 'X';
                    quemJoga = 1;
                }; break;            
                case 12 :
                if(jogo[1][2] === ''){
                    jogo[1][2] = 'X';
                    quemJoga = 1;
                }; break;            
                case 20 :
                if(jogo[2][0] === ''){
                    jogo[2][0] = 'X';
                    quemJoga = 1;
                }; break;            
                case 21 :
                if(jogo[2][1] === ''){
                    jogo[2][1] = 'X';
                    quemJoga = 1;
                }; break;            
                case 22 :
                if(jogo[2][2] === ''){
                    jogo[2][2] = 'X';
                    quemJoga = 1;
                }; break;
        }
    }
    //////////////////////// Daqui pra frente são jogadas do Player 2:
    else if((quemJoga === 1) && (jogoRolando)){
        switch(p){
                case 00 :
                if(jogo[0][0] === ''){
                    jogo[0][0] = 'O';
                    quemJoga = 0;
                }; break;
                case 01 :
                if(jogo[0][1] === ''){
                    jogo[0][1] = 'O';
                    quemJoga = 0;
                }; break;
                case 02 :
                if(jogo[0][2] === ''){
                    jogo[0][2] = 'O';
                    quemJoga = 0;
                }; break;
                case 10 :
                if(jogo[1][0] === ''){
                    jogo[1][0] = 'O';
                    quemJoga = 0;
                }; break;            
                case 11 :
                if(jogo[1][1] === ''){
                    jogo[1][1] = 'O';
                    quemJoga = 0;
                }; break;            
                case 12 :
                if(jogo[1][2] === ''){
                    jogo[1][2] = 'O';
                    quemJoga = 0;
                }; break;            
                case 20 :
                if(jogo[2][0] === ''){
                    jogo[2][0] = 'O';
                    quemJoga = 0;
                }; break;            
                case 21 :
                if(jogo[2][1] === ''){
                    jogo[2][1] = 'O';
                    quemJoga = 0;
                }; break;            
                case 22 :
                if(jogo[2][2] === ''){
                    jogo[2][2] = 'O';
                    quemJoga = 0;
                }; break;
        }
    }   

    atualizaTabuleiro();
    vitoria = verificaVitoria();
    
    if (vitoria != ''){
        if (quemJoga = 0){
           // alert(vitoria + " Venceu!");
           mensagemWinner(vitoria);
            jogoRolando=false;
        } else {
            mensagemWinner(vitoria);
               // alert(vitoria + " Venceu!");
                jogoRolando=false;
            
        }
    }
}
        <div class='div-container'>
            <div class="header">
                <p>Turn:</p>
                <p id='turn'> </p>
               
                <select id='gameMode'>
                    <option value="0">Game Mode:</option>
                    <option value="1">Player vs Player</option>
                    <option value="2">Player vs CPU - EASY</option>
                    <option value="2">Player vs CPU - HARD</option>
                </select>
                
                <button onclick="restart()">Restart Game</button>
                <img src="./assets/old-lady-icon-68.png" alt="jogo-da-velha">
            </div>
            <div class="table">
                <div class="cel" id='00' onClick='jogadaComp(00)'></div>
                <div class="cel" id='01' onClick='jogadaComp(01)'></div>
                <div class="cel" id='02' onClick='jogadaComp(02)'></div>

                <div class="cel" id='10' onClick='jogadaComp(10)'></div>
                <div class="cel" id='11' onClick='jogadaComp(11)'></div>
                <div class="cel" id='12' onClick='jogadaComp(12)'></div>

                <div class="cel" id='20' onClick='jogadaComp(20)'></div>
                <div class="cel" id='21' onClick='jogadaComp(21)'></div>
                <div class="cel" id='22' onClick='jogadaComp(22)'></div>
            </div>
        </div>

javascript javascript-events onclick

  • creates a Function, associates to the "onchange" event of select, see the value of select and based on option executes the Function you want

  • but then as I change the function that is called in Onclick.. it seems to me that it is fixed there and there is no way to change

1 answer

0

In this code snippet when selecting an option it will go through a function that will check the selected value and direct to the function that will execute the code of the option.

function opcaoSelecionada(val){
     if(val == 1){
       playerVsPlayer()
     }else if(val == 2) {
       playerVsCpuEasy()
     }else if(val == 3){
       playerVsCpuHard()
     }

  }

  function playerVsPlayer(){
    console.log('Você selecionou a opção Player VS Player');
  }

  function playerVsCpuEasy() {
    console.log('Você selecionou a opção Player VS CPU (EASY)');
  }
  
  function playerVsCpuHard() {
    console.log('Você selecionou a opção Player VS CPU (HARD)');
  }
<select id='gameMode' onchange="opcaoSelecionada(this.value)">
      <option value="0">Game Mode:</option>
      <option value="1">Player vs Player</option>
      <option value="2">Player vs CPU - EASY</option>
      <option value="3">Player vs CPU - HARD</option>
</select>

Browser other questions tagged javascript javascript-events onclick

You are not signed in. Login or sign up in order to post.