JavaScript function with parameter runs once and can't be called again-CodePudding

A JavaScript function I made isn't finishing/starting at the second time properly, and as a result, I can only see the effects once.

            <button  id="A05" onclick="funcao('A05')">05</button>
            <button  id="A04" onclick="funcao('A04')">04</button>
            <button  id="A03" onclick="funcao('A03')">03</button>
            <button  id="A02" onclick="funcao('A02')">02</button>
            <button  id="A01" onclick="funcao('A01')">01</button>

I had this set of buttons in my html code, and each of them is tied to the function below, in a separate .js file.

function funcao(str){
    a = '#'   str;
    const botao = document.querySelector(a);

    const colecao = document.getElementsByClassName("free");
    for(let x = 0; x < colecao.length; x  ){
        //alert(`Botao atual: ${colecao[x].id}`);
        if(colecao[x].id == botao.id){
            const aviso = document.querySelector('#default');
            aviso.id = 'warning';
            botao.style.backgroundColor = "rgb(255, 68, 0)";
            break;
        }
        else if(colecao[x].id < botao.id){
            const aviso = document.querySelector('#default');
            aviso.id = 'ativo';
            break;
        }
    }
}

It works perfectly the first time, and the result is one of the buttons change color if it was selected while having the "free" class. If not, the warning message, previously hidden in the background of the page, is lit in red.

However, when clicking in any button again, the effects of a second run aren't observed, and instead the buttons and/or the warning aren't changed by any means, most likely because the function doesn't run again.

The issue, I believe, is in the function parameter, but as I'm new to HTML and javaScript, i'm not so sure how to fix this.

CodePudding user response：

What is problem

I believe you forget one element with the default id but it's ok

your code working for the first time because:

when for the first time you execute the code

one of the if statements executing and will change 'default' to warning or ativo.

next time there is no default id because you changed it

so these codes not working:

 aviso.id = 'warning';

 aviso.id = 'ativo';

and you will get this:

Uncaught TypeError: Cannot set properties of null (setting 'id')

What is solution

I think this code is better:

<!DOCTYPE html>
<html>
  <body>
    <p id="default">default</p>
    <button  id="A05">05</button>
    <button  id="A04">04</button>
    <button  id="A03">03</button>
    <button  id="A02">02</button>
    <button  id="A01">01</button>

    <script>
      const colecao = document.getElementsByClassName("free");
      const buttons = document.querySelectorAll("button");
      const aviso = document.getElementById("default");
      buttons.forEach((button) => {
        button.addEventListener("click", (event) => {
          const id = event.target.id;
          const botao = document.getElementById(id);
          for (let item in colecao) {
            if (colecao[item].id == botao.id) {
              aviso.id = "warning";
              botao.style.backgroundColor = "rgb(255, 68, 0)";
            } else if (colecao[item].id < botao.id) {
              aviso.id = "ativo";
              break;
            }
          }
        });
      });
    </script>
  </body>
</html>

there are two changes :

I get an element with a default id outside of the function
I used addEventListener instead of onclick(not necessary but it's better thanks to @ronnie-royston)

CodePudding user response：

Use the event of the click to tell which button was clicked.

var buttons = document.querySelectorAll("button");

buttons.forEach(function(button){
  button.addEventListener('click', function(event) {
    alert(event.target.id)
  });
});

            <button  id="A05">05</button>
            <button  id="A04">04</button>
            <button  id="A03">03</button>
            <button  id="A02">02</button>
            <button  id="A01">01</button>