时间戳

首页 > 解决方案 > Html 按钮没有出现来自案例功能的警报消息

javascript - Html 按钮没有出现来自案例功能的警报消息

问题描述

我正在尝试使用案例语句为三个不同的按钮按下提供三个不同的警报

我努力了

<!DOCTYPE html>
<html>
<head>
<script>
function something(){
 var counter = 0;
var button = document.querySelector("#button");

button.addEventListener("click", function() {
counter++;
switch(counter) {
    case 1:
        alert("something");
        break;
    case 2:
        alert("something else");
        break;
    case 3:
        alert("something else else");
        break;
  }
 });
 }

</script>
</head>
<body>
<input id="button" value="enter" type="button">
</body>
</html>

控制台中没有错误。该按钮显示在网页上，但不显示警报。

标签： javascripthtml

解决方案

正如 Jaromanda 指出的那样，您需要调用该函数并对其进行定义，例如：

function something() {
  var counter = 0;
  var button = document.querySelector("#button");

  button.addEventListener("click", function() {
    counter++;
    switch (counter) {
      case 1:
        alert("something");
        break;
      case 2:
        alert("something else");
        break;
      case 3:
        alert("something else else");
        break;
    }
  });
}
something();
<input id="button" value="enter" type="button">

或者，以这种方式设置代码可能更直观，在函数外部识别按钮和计数器变量，然后在每次调用函数时递增计数器（在函数内部）。

（注意：此版本包括两个附加功能：

1)if如果计数器太高，该语句会将计数器重置为零，因此每次单击都会产生警报。如果您希望第三次以上的点击不执行任何操作，只需删除此声明（或将其注释掉）即可。

2) defaultswitch 语句中有一个案例——如果出现问题并且我们的代码为计数器提供了意外的值，这将有助于我们调试该问题。）

const button = document.querySelector("#button");
let counter = 0;
button.addEventListener("click", doAlert);

function doAlert(){
  if (counter == 3){ counter = 0; }
  counter++;
  switch (counter) {
    case 1: alert("something"); break;
    case 2: alert("something else"); break;
    case 3: alert("something else else"); break;
    default: alert("this should be impossible"); break;
  }
}
<input id="button" value="Enter" type="button">

推荐阅读