I cannot return onclick property to a button with its parameters

Asked

Viewed 28 times

1

I created a simple hangman game, in which within multiple themes a secret word is chosen randomly. The user has at his disposal 27 buttons, each one with a letter of the alphabet and when clicking a button calls a function (with 2 parameters, the corresponding letter and a numeric value) that checks if the letter that the user has chosen is in some part of the secret word. Whether you are or not after calling the function and checking the property onclick is removed.

My problem is the buttons I have for the user to choose a new theme or new word, which return all keyboard buttons to their properties onclick back. I can add back the property onclick with the corresponding parameters however when I call the check() function on the buttons they all act as if they were the letter V.

Here is the clear() function that returns the onclick to all buttons, with the correct parameters.

function limpar(){
            nind = 0;
            tentativas = 5;
            ncertas = 0; 
            document.getElementById("mstr").style.display = "";
            document.getElementById("dca").style.display = 'none';
            for(var i = 0; i < 27; i++)
                {
                    tc[i].style.color = '#ffff03';
                    tc[i].onclick = function() { verificar(ar[i], i+1); }; 
                    //Adiciona a propriedade onclick de volta a cada botão, ar[i] é a letra do array correspondente ao botão tc[i] e o i+1 o valor numérico correspondente

                }
            for(var i = 0; i < paltd.length; i++)
                {
                    paltd[i].innerHTML = "-";
                    paltd[i].style.display = 'none';
                }
                document.getElementById("ptnt").innerHTML = tentativas;

        }

And here is the function check that it receives the letter and the number corresponding to the button clicked.

function verificar(b,num){
            //alert(b, num);
            var nerr = 0;
            for (i = 0; i < palavrasecreta.length; i++)
                {
                    if(b == palavrasecreta[i])
                        {
                            paltd[i].innerHTML = b;
                            ncertas += 1;
                            tc[num-1].style.color = '#60ff90';
                        }else{
                            nerr +=1;
                        }       
                } 
            if (nerr == palavrasecreta.length)
                {
                    tentativas -= 1;
                    document.getElementById("ptnt").innerHTML = tentativas;
                    tc[num-1].style.color = '#773333';
                }
            //alert(ncertas);
            tc[num-1].onclick = function(){};
            verificarjogo(ncertas);

        }

My problem is that for some reason the check() function is always checking as if it had clicked the V button, no matter which button I click. When inspecting element I see that all buttons have their respective parameters, however when clicking always call the function check() with the parameters V and 24.
The first time the game runs everything works well, this only happens after calling the clear function that "reset" the game, returning to each button its onclick property.

Edit: I forgot to mention that the keyboard are buttons of the same class on an html page arranged in qwerty format, and each number corresponds to its position in the class. V for example is the 24th button (23 in the class)

  • I also tried using setAttribute to define the property onclick for "" and later for the correct parameters and values passed from V and 24 to Y and 6 once and then U and 7 for everything else.

1 answer

0

I ended up solving the problem using the attribute disable , by setting in function check() disable for "", and in function clear() for false

function limpar(){
            nind = 0;
            tentativas = 5;
            ncertas = 0; 
            document.getElementById("mstr").style.display = "";
            document.getElementById("dca").style.display = 'none';
            for(var i = 0; i < 27; i++)
                {
                    tc[i].style.color = '#ffff03';
                    tc[i].disabled = false;
                }
            for(var i = 0; i < paltd.length; i++)
                {
                    paltd[i].innerHTML = "-";
                    paltd[i].style.display = 'none';
                }
                document.getElementById("ptnt").innerHTML = tentativas;

        }




function verificar(b,num){
            //alert(b);
            //alert(num);
            var nerr = 0;
            for (i = 0; i < palavrasecreta.length; i++)
                {
                    if(b == palavrasecreta[i])
                        {
                            paltd[i].innerHTML = b;
                            ncertas += 1;
                            tc[num-1].style.color = '#60ff90';
                        }else{
                            nerr +=1;
                        }       
                } 
            if (nerr == palavrasecreta.length)
                {
                    tentativas -= 1;
                    document.getElementById("ptnt").innerHTML = tentativas;
                    tc[num-1].style.color = '#773333';
                }
            //alert(ncertas);
            tc[num-1].setAttribute("disabled", "");
            verificarjogo(ncertas);

        }

Browser other questions tagged

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