个人中心
gpt4 book ai didi

javascript - Html 按钮未显示来自案例功能的警报消息

转载 作者：可可西里 更新时间：2023-11-01 13:41:14 25 4
gpt4 key购买 nike

我正在尝试使用 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/

25 4 0
文章推荐： javascript - 使用详细信息和摘要标签作为可折叠的内联元素
文章推荐： php - 使用 Laravel 按天查询数据和分组
文章推荐： php - 如何测试 Laravel 5 Controller 方法
文章推荐： html - 如何在嵌套行 Bootstrap 上设置断点
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com