如何阻止Javascript警报在无限循环中重新出现
[英]How to stop a Javascript alert from reappearing in an infinite loop
问题描述
The alert dialog created in the onclick reappears every single time I dismiss it in an infinite loop. 
每当我以无限循环关闭它时，就会再次出现在onclick中创建的警报对话框。 This occurs in both Chrome and Firefox. Chrome和Firefox中都会发生这种情况。 This is my first day learning Javascript so please be gentle. 这是我学习JavaScript的第一天，请保持温柔。
Is there a way to make the alert dialog appear only once? 有没有办法使警报对话框仅出现一次？
This might be a problem with my computer. 这可能是我的计算机出现问题。 If so, what do I do to fix that? 如果是这样，我该如何解决？
<!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>
Thanks guys. 多谢你们。
4 个解决方案
解决方案1
3 已采纳 2015-10-04 03:27:06
These lines: 这些行：
x.removeEventListener("onclick", changeFontRed(), false);
x.addEventListener("onclick", changeFontBlue());
You are calling the functions changeFontRed and changeFontBlue , not just naming them . 您正在调用函数 changeFontRed和changeFontBlue ，而不仅仅是命名它们 。 The parenthesis () mark an invocation, and when the function is called again the dialog reappears. 括号()表示调用，然后再次调用该函数时，对话框重新出现。
Also (thanks to commenters) the event is named "click". 同样，（由于评论者）事件被命名为“ click”。 Try this: 尝试这个：
x.removeEventListener("click", changeFontRed, false);
x.addEventListener("click", changeFontBlue);
解决方案2
1 2015-10-04 03:26:25
The second argument to removeEventListener and addEventListener should be a function. removeEventListener和addEventListener的第二个参数应该是一个函数。 You're not passing the function, you're calling the function because you have () after it. 您没有传递函数，而是在调用函数，因为它后面有() 。 Take that out. 拿出来
function changeFontBlue() {
var x = document.getElementById("demo");
x.style.color = "blue";
x.removeEventListener("click", changeFontBlue, false);
x.addEventListener("click", changeFontRed);
}
Also, the name of the event is just click , not onclick . 同样，事件的名称只是click ，而不是onclick 。
解决方案3
1 2015-10-04 03:33:12
There are some problems with your code, but the infinite loop problem is in the line below: 您的代码有一些问题，但是无限循环问题在下面的行中：
x.removeEventListener("onclick", changeFontRed(), false);
More specifically, that part: changeFontRed() . 更具体地说，该部分是： changeFontRed() 。 Although you're trying to remove the changeFontRed event listener off your element, what you're really doing is calling that function and passing the return value to the removeEventListener function. 尽管您试图从元素上删除changeFontRed事件侦听器，但是您实际上所做的是调用该函数并将返回值传递给removeEventListener函数。 And as soon as you're already inside the changeFontRead function, it will be calling itself recursivelly, until it turns into a stack overflow. 并且，一旦您已经进入changeFontRead函数，它就会递归地调用自身，直到变成堆栈溢出为止。
The removeEventListener function expects as the second paramenter a function reference, that will be called only when the button is clicked. removeEventListener函数期望将第二个参数作为函数引用，仅当单击按钮时才调用该函数引用。 So, to fix your problem, you must remove the () , and pass the function itself. 因此，要解决您的问题，必须删除()并传递函数本身。 Eg: removeEventListener('click', changeFontRed) . 例如： removeEventListener('click', changeFontRed) 。
But there are other problems in your code, for example the "onclick" you're passing as the first parameter, because the addEventListener method won't understand it, since you shouldn't pass "on[event name]" , but only "[event name]" . 但是您的代码中还有其他问题，例如作为第一个参数传递的"onclick" ，因为addEventListener方法将无法理解它，因为您不应传递"on[event name]" ，而只能传递"[event name]" 。 So, it should be "click" only. 因此，它应该仅是"click" 。
解决方案4
1 2015-10-04 03:33:49
- the second argument for remove/addEventListener should be a function, not the result of calling the function (as answered already). remove / addEventListener的第二个参数应该是一个函数，而不是调用该函数的结果（已回答）。
- first argument for remove/addEventListener should be 'click' not 'onclick'. remove / addEventListener的第一个参数应该是“单击”而不是“ onclick”。
- The button click will work the first time only, after that, you click the text that changes colour to change the colour again. 单击按钮仅在第一次时有效，然后单击更改颜色的文本以再次更改颜色。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.