点击多个按钮进入下一页

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 = 楼梯的 div 中，并为每个图像指定一个磁带类

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

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