为何无法在onclick函数中实现计数功能？

我一眼就看穿问题所在了——你的count变量每次调用uh()函数都会被重新初始化！每次点击按钮触发函数时，开头的var count = 0;都会把计数重置为0，不管点多少次，count永远是0，那些count == 2、count == 3之类的条件自然永远触发不了。

我们需要调整count的作用域，同时修正代码里的几个小错误，具体步骤如下：

1. 移count到函数外部，保留状态 #

把count定义在uh()函数外面，让它在多次函数调用之间保存累积的计数，而不是每次都被重置。

2. 修正类名属性的大小写错误 #

JavaScript里元素的类名属性是className（驼峰命名），你代码里有几处写成了classname（全小写），这会导致样式无法正确切换。

3. 修正HTML语法错误 #

你的HTML里<div id=h eader>是拼写错误，应该是<div id="header">；还有<h1>标签没有闭合，要改成</h1>。

JavaScript #

// 将count放到函数外部，让它在多次调用间保留计数状态
let count = 0;

function uh() {
  var words;
  var conf = confirm("ooh that felt goood");
  var button = document.querySelector("#selector");
  var box = document.querySelector("#box");

  if (count == 5) {
    button.className = "button3";
    words = " ";
  } else if (count == 4) {
    button.className = "button3";
    words = "I give up. This is all you get.";
    count++;
  } else if (count == 3) {
    button.className = "button3";
    words = "...";
    count++;
  } else if (count == 2) {
    button.className = "button2";
    words = "the power?";
    count++;
  } else if (button.className == "button3") {
    button.className = "button2";
    words = "ahahaha... ha.. uh..";
    count++;
  } else if (button.className == "button2") {
    button.className = "button3";
    box.className = "box";
    words = "THE POWER";
  } else if (conf == true) {
    words = "AHAHAHA I HAVE YOU NOW";
    button.className = "button2";
  } else {
    words = "...";
    button.className = "button";
  }

  document.querySelector(".header").innerHTML = words;
}

CSS #

body { background-color: black; }
#header { text-align: center; }
.header {
  background-color: #000099;
  color: white;
  display: inline-block;
  border: 5px solid white;
  padding: 20px;
  width: 90%;
}
#box {
  text-align: center;
  background-color: green;
  height: 500px;
}
.box {
  text-align: center;
  height: 500px;
}
.button {
  background-color: grey;
  color: white;
  margin: 170px;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}
.button2 {
  background-color: #ff0000;
  border: none;
  color: white;
  padding: 15px 32px;
  margin: 170px;
  text-decoration: none;
  display: inline-block;
  font-size: 40px;
  box-shadow: 0px 0px 10px white;
}
.button3 {
  background-color: black;
  border: none;
  color: red;
  padding: 30px 60px;
  margin: 170px;
  text-decoration: none;
  display: inline-block;
  font-size: 60px;
  box-shadow: 0px 0px 20px 5px gold;
}

HTML #

<div id="header">
  <h1 class="header"> I feel an itch... </h1>
</div>
<div id="box">
  <input type="button" id="selector" class="button" value="CLICK ME" onclick="uh()">
</div>

如果你不想让count暴露在全局作用域里，可以用闭包封装它，这样count只会在函数内部可见，不会污染全局环境：

const uh = (() => {
  let count = 0;
  return function() {
    var words;
    var conf = confirm("ooh that felt goood");
    var button = document.querySelector("#selector");
    var box = document.querySelector("#box");

    // 这里写原来的逻辑，直接使用内部的count即可
    if (count == 5) {
      button.className = "button3";
      words = " ";
    }
    // ... 剩下的条件判断和之前一致
  }
})();

内容的提问来源于stack exchange，提问作者Mugs