我正在尝试使用 case 语句为三个不同的按钮按下提供三个不同的警报
我试过了
<!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>
控制台没有错误。该按钮显示在网页上，但未显示警报。
最佳答案
正如 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) 在 switch 语句中有一个 default case —— 万一出现问题，我们的代码给计数器一个意外的值，这将帮助我们调试这个问题。)
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">关于javascript - Html 按钮未显示来自案例功能的警报消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57847886/