html 带参数的JavaScript函数运行一次，不能再次调用

zzoitvuj 于 2022-12-16 发布在 Java

关注(0)|答案(2)|浏览(189)

我创建的一个JavaScript函数在第二次时没有正确完成/启动，因此，我只能看到一次效果。

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

我的html代码中有这组按钮，每个按钮都与下面的函数绑定在一个单独的.js文件中。

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;
        }
    }
}

它第一次工作得很完美，结果是其中一个按钮在拥有“free”类时被选中时会改变颜色。如果没有，以前隐藏在页面背景中的警告消息会亮起红色。
然而，当再次点击任何按钮时，不会观察到第二次运行的效果，相反，按钮和/或警告不会以任何方式更改，很可能是因为该函数不会再次运行。
我认为问题出在函数参数上，但由于我是HTML和javaScript的新手，我不知道如何解决这个问题。

Html

来源：https://stackoverflow.com/questions/74777546/javascript-function-with-parameter-runs-once-and-cant-be-called-again

2条答案

按热度按时间

11dmarpk1#

我想你忘了一个带有default id的元素，没关系。
如果你没有这个元素，你的代码甚至第一次都不会执行。
无论如何，我们需要一个id为default的元素。

有什么问题？

您的代码第一次工作是因为：
当你第一次执行代码时，if语句之一运行并将'default'更改为warning或ativo。
因此，下一次没有default ID，因为您更改了它，并且这些代码不起作用：

aviso.id = 'warning'; //aviso is null

 aviso.id = 'ativo';

你会得到这个TypeError：

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

解决方案是什么？

我认为这个代码更好：

<!DOCTYPE html>
<html>
  <body>
    <p id="default">default</p>
    <button class="taken" id="A05">05</button>
    <button class="free" id="A04">04</button>
    <button class="taken" id="A03">03</button>
    <button class="free" id="A02">02</button>
    <button class="taken" 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>

有两个变化：
1.我在函数外部得到了一个id为default的元素
1.我用了addEventListener而不是onclick（不是必须的，但它更好，感谢@ronnie-royston）
1.而且我使用了for..in而不是简单的for（这个也不是必须的）

第一个更改将修复您的代码，因为您之前获得了一个具有default id的元素，因此不需要再次使用该元素

赞(0）回复(0）举报 2022-12-16

wvyml7n52#

使用单击的event来判断单击了哪个按钮。

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

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

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

赞(0）回复(0）举报 2022-12-16

我来回答

html 带参数的JavaScript函数运行一次，不能再次调用

2条答案

有什么问题？

解决方案是什么？

相关问题

热门标签

最新问答