有没有办法让js中每次点击文档后发生不同的功能？

Question

我正在尝试制作一个游戏网站，当用户第一次登录时，他们会看到两个显示灯，上面写着：“欢迎来到宇宙游戏！”我想让它具有交互性，所以我一直在尝试使其成为当用户单击文档上的任意位置时，它会显示其中一个单词。我已经得到了第一个单词，问题是尝试调用第二个函数来点亮第二个单词而不调用第一个函数。

这是我尝试过的：

        var clicks = 0;

        function playLightSwitch1() {
        clicks = 1;
        audio = new Audio("lightSwitch.mp3");
        audio.play();
        document.getElementById("welcomeText").setAttribute("class", "glowWelcome");
        document.getElementById("whiteTraingle1").setAttribute("class", "whiteTraingleVisible1");
        document.getElementById("whiteTraingle2").setAttribute("class", "whiteTraingleVisible2"); 
    }

    if(clicks == 0) {
        document.addEventListener("click", playLightSwitch1);
    }
    if(clicks = 1) {
        document.removeEventListener("click", playLightSwitch1);
    }

第一个功能有效，但是当我再次单击时，第一个功能运行。我只是希望第二次点击时什么也不会发生。 PS：忽略 setAttribute 的东西，这只是改变文本，让它发光。

Answer 1

实现目标的更好方法是使用单个事件处理程序，在每次单击时迭代一组操作，而不是动态添加/删除事件处理程序。

您可以将这些操作放入一个数组中，并根据索引执行每个操作，该索引随着单击文档（或您需要的任何目标元素）而递增。

这是一个工作示例：

const welcomeDiv = document.querySelector('.welcomeText');
const triangle1Div = document.querySelector('.whiteTriangle1');
const triangle2Div = document.querySelector('.whiteTriangle2');
const audio = new Audio('lightSwitch.mp3');

const actions = [
  () => welcomeDiv.classList.add('glowWelcome'),
  () => triangle1Div.classList.add('whiteTraingleVisible1'),
  () => triangle2Div.classList.add('whiteTraingleVisible2'),
]

const playLightSwitch = () => {  
  // audio.play(); // removed as element not in demo
  
  let clickIndex = document.body.dataset.clickIndex || 0;
  actions[clickIndex % actions.length]();
  document.body.dataset.clickIndex = ++clickIndex;  
}

document.addEventListener('click', playLightSwitch);

body {
  font-size: 2rem;
  font-weight: bold;
}

.glowWelcome {
  color: #C00;
}

.whiteTraingleVisible1 {
  color: #0C0;
}

.whiteTraingleVisible2 {
  color: #00C;
}

<div class="welcomeText">Welcome</div>
<div class="whiteTriangle1">Triangle1</div>
<div class="whiteTriangle2">Triangle2</div>