为什么在我的switch语句中没有增量来更改大小写？

Question

我打算用此代码实现的是单击“单击我！”。按钮，它应该增加num +1，这样它就会改变大小写。例如。在switch语句中从案例0到案例1。但是我得到的所有信息都是不确定的。我试图单独使用switch语句和num ++函数，但效果不佳。感谢您对解决方案的任何帮助。

var btn=document.querySelector("button")
    var text="test"
    var num

function changeCase () {
  btn.addEventListener(onclick, function (){num++})
  switch (num) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
  }
}

    document.getElementById("demo").innerHTML = text;

<h1>Hello!</h1>
    <div>
      <button onclick="changeCase()">Click Me!</button>
      <p id="demo"></p>
    </div>

Answer 1

几件事：

• 在text中进行更改后，您没有对changeCase执行任何操作。您仅在页面加载时使用一次。

• 您同时使用onclick属性，然后单击该属性时，您正在尝试为click添加事件侦听器。

• 您在onclick调用中使用addEventListener作为标识符，但您想将"click"作为字符串（并且不带“ on”。

）

• 您可能想为num设置初始值，而不是将其默认为undefined。如果在num++中包含num的情况下执行undefined，则会得到NaN，与您的任何情况都不匹配。

要解决它：

• 不要使用onclick属性，请使用addEventListener。

• 更改text后使用。

• 为num添加值。

这里是一个例子：

var btn=document.querySelector("button");
var text="test";
var num = 0;

btn.addEventListener("click", function (){
    num++;
    changeCase();
});

function changeCase () {
    switch (num) {
        case 0:
            text = "Off";
            break;
        case 1:
            text = "On";
            break;
        default:
            text = "No value found";
            break;
    }
    document.getElementById("demo").innerHTML = text;
}

changeCase();

<h1>Hello!</h1>
    <div>
      <button>Click Me!</button>
      <p id="demo"></p>
    </div>