如何阻止Javascript警报在无限循环中重新出现_Javascript

如何阻止Javascript警报在无限循环中重新出现

javascript

如何阻止Javascript警报在无限循环中重新出现,javascript,Javascript,在onclick中创建的警报对话框每次在无限循环中关闭时都会重新出现。这在Chrome和Firefox中都会发生。这是我学习Javascript的第一天，所以请温柔一点是否有办法使警报对话框只显示一次这可能是我的电脑有问题。如果是，我该怎么做才能解决这个问题 <!DOCTYPE html> <html> <body> <h1>What Can JavaScript Do?</h1> <p id="demo">Java

在onclick中创建的警报对话框每次在无限循环中关闭时都会重新出现。这在Chrome和Firefox中都会发生。这是我学习Javascript的第一天，所以请温柔一点

是否有办法使警报对话框只显示一次

这可能是我的电脑有问题。如果是，我该怎么做才能解决这个问题

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<p>"The text should turn red and one alert dialog should appear on click."</p>

<script>
function changeFontRed() {
    var x = document.getElementById("demo");
    x.style.color = "red";
    console.log("Hello World!");
    window.alert("Hello World!");
    x.removeEventListener("onclick", changeFontRed(), false);
    x.addEventListener("onclick", changeFontBlue());
}

function changeFontBlue() {
    var x = document.getElementById("demo");           
    x.style.color = "blue";
    x.removeEventListener("onclick", changeFontBlue(), false);
    x.addEventListener("onclick", changeFontRed());
}
</script>

<button type="button" onclick="changeFontRed()">Click Me!</button>

</body>
</html>


JavaScript能做什么？
JavaScript可以更改HTML元素的样式
“文本应变为红色，单击时应显示一个警报对话框。”
函数changeFontRed（）{
var x=document.getElementById（“演示”）；
x、 style.color=“红色”；
log（“你好，世界！”）；
window.alert（“你好，世界！”）；
x、 removeEventListener（“onclick”，changeFontRed（），false）；
x、 addEventListener（“onclick”，changeFontBlue（））；
}
函数changeFontBlue（）{
var x=document.getElementById（“演示”）；
x、 style.color=“蓝色”；
x、 removeEventListener（“onclick”，changeFontBlue（），false）；
x、 addEventListener（“onclick”，changeFontRed（））；
}
点击我！

谢谢大家。

removeEventListener和

addEventListener

的第二个参数应该是一个函数。您没有传递函数，而是调用函数，因为后面有

（）

。把它拿出来

function changeFontBlue() {
    var x = document.getElementById("demo");           
    x.style.color = "blue";
    x.removeEventListener("click", changeFontBlue, false);
    x.addEventListener("click", changeFontRed);
}

此外，事件的名称只是单击，而不是单击以下行：

x.removeEventListener("onclick", changeFontRed(), false);
x.addEventListener("onclick", changeFontBlue());

您正在调用函数

changeFontRed

和

changeFontBlue

，而不仅仅是命名它们。括号

（）

标记调用，再次调用函数时，对话框重新出现

此外（多亏了评论者），该活动被命名为“点击”。试试这个：

x.removeEventListener("click", changeFontRed, false);
x.addEventListener("click", changeFontBlue);

您的代码存在一些问题，但无限循环问题如下所示：

x.removeEventListener("onclick", changeFontRed(), false);

更具体地说，这部分：

changeFontRed（）

。尽管您试图从元素中删除

changeFontRed

事件侦听器，但您真正要做的是调用该函数并将返回值传递给

removeEventListener

函数。一旦您已经进入

changeFontRead

函数，它就会递归地调用自己，直到它变成堆栈溢出

removeEventListener

函数期望函数引用作为第二个参数，只有在单击按钮时才会调用该函数引用。因此，要解决问题，必须删除

（）

，并传递函数本身。例如：

removeEventListener（'click'，changeFontRed）

但是代码中还有其他问题，例如作为第一个参数传递的

“onclick”

，因为

addEventListener

方法无法理解它，因为您不应该在[event name]“上传递

，而只传递“[event name]”
。因此，它应该是“单击”

remove/addEventListener的第二个参数应该是一个函数，而不是调用该函数的结果（已经回答过）
remove/addEventListener的第一个参数应该是“click”，而不是“onclick”
按钮单击仅在第一次起作用，然后单击更改颜色的文本以再次更改颜色
可与addEventListeneradd/removeEventListener一起使用的事件列表不能与“onclick”一起使用，只需“单击”即可。是的，重要的是将其更改为“单击”而不是“onclick”。add/removeEventListener不能与“onclick”一起使用，只需“单击”