Question

我正在尝试做一个学校项目。我必须列出一个列表，然后单击复选框后应该将其划掉。我还不知道Javascript，我仍然想弄明白。我想知道为什么这不起作用。

function  crossout(id) {
  var box = document.getElementById(id);
  box.style = "text-decoration: line-through";
}

  <body>
    <h1>Hello World!</h1>
    <h3>Shopping List</h3>
    <p id="box1">
      <input type="checkbox" onclick="crossout"("box1") />
      Banana
    </p>
    <p id="box2">
      <input type="checkbox" onclick="crossout"("box2") />
      Noodles
    </p>
    <p id="box3">
      <input type="checkbox" onclick="crossout"("box3") />
      Eggs
    </p>

    <script src="app.js" charset="utf-8"></script>
  </body>

Answer 1

您的复选框中有拼写错误：

onclick="crossout"("box1")

这应该是：

onclick="crossout('box1')"

原始方式仅将onclick设置为"crossout"。

Answer 2

我建议您不要严格地在DOM内部绑定事件，而是建议您捕获每个checkbox元素，然后使用Array#forEach对其进行迭代，并将eventListener绑定到每个元素。如果您要检查checkbox，则checked类将应用于其父级p元素。

它看起来很好，效果更好。

var elems = document.getElementsByClassName('box');
    Array.from(elems).forEach(v => v.addEventListener('change', function(){
      this.parentNode.classList.toggle('checked');
    }));

.checked {
  text-decoration: line-through;
}

<h1>Hello World!</h1>
<h3>Shopping List</h3>
<p id="box1">
  <input type="checkbox" class='box'>Banana
</p>
<p id="box2">
  <input type="checkbox" class='box'>Noodles
</p>
<p id="box3">
  <input type="checkbox" class='box'>Eggs
</p>

javascript复选框直通

2 个答案: