点击多个按钮进入下一页

Question

需要一些帮助。 当我单击页面上的黄色胶带时，它消失了（允许上楼梯。但是我正在努力对其进行编程，以便在单击所有三个时，它会进入下一页。感谢任何帮助。

 var counter = 0; function del1() if (counter == 0) { { document.getElementById("img3").style.display = 'none'; counter++; } } function del2() if (counter == 1) { { document.getElementById("img4").style.display = 'none'; counter++; } } function del3() if (counter == 2) { { document.getElementById("img5").style.display = 'none'; counter++; } } function win() if (counter === 3) { clearInterval(timer); sessionStorage.setItem('timerem', rem); window.open('page2.html', "_self"); }

Answer 1

你最好使用委托

将胶带图像包裹在一个 id = stairs 的 div 中，并给每个图像一个 class 的胶带

让我知道你是否必须按顺序切割它们

const tapes = 3;
document.getElementById("stairs").addEventListener("click", function(e) {
  const tgt = e.target; // whatever clicked in the div 
  if (tgt.className.contains("tape")) { // we clicked a tape
    tgt.className.add("hide"); // hide it
    const allSnipped = tgt.closest("div").querySelectorAll(".tape.hide").length === tapes; // count .hide's 
    if (allSnipped) {
      clearInterval(timer);
      sessionStorage.setItem('timerem', rem);
      location = 'page2.html';
    }
  }
})

.hide {
  display: none;
}

---

您的代码已修复

 var counter = 0; function del1() { if (counter == 0) { document.getElementById("img3").style.display = 'none'; counter++; } } function del2() { if (counter == 1) { document.getElementById("img4").style.display = 'none'; counter++; } } function del3() { if (counter == 2) { document.getElementById("img5").style.display = 'none'; win(); } } function win() { clearInterval(timer); sessionStorage.setItem('timerem', rem); location = 'page2.html'; }