为什么addEventListener加载会阻止代码正常工作? [英] Why is addEventListener load preventing code from working?
问题描述
更新:我最初有
Update: I originally had
document.addEventListener("DOMContentLoaded"...
并且正在链接到开头的JS文件
and was linking to the JS file in the head of the HTML document.
结果是:另一个js脚本的某些部分无法正常工作。
The result was: some parts of another js script weren't working.
I
现在奇怪的是:
当我将JS文件的链接移动到HTML文档的页脚时,然后才可以与 DOMContentLoaded一起使用。
但这很奇怪吗?
When I move the link to the JS file to the footer of the HTML document, then and only then it actually works with 'DOMContentLoaded'. But that's very weird isn't it?
我不知道这是怎么回事!有指针吗?
I have no idea what's going on! Any pointers?
原始帖子:
我想揭开一个大谜团。
这段代码运行正常时:
There is a big mystery I'm trying to unravel. While this code is working perfectly:
(function () {
"use strict";
var state = document.getElementById("s-state");
var btnEstimate = document.getElementById("btn-estimate");
// document.addEventListener("load", function() {
btnEstimate.setAttribute("disabled", "disabled");
btnEstimate.value = "Please select your state first!";
state.addEventListener("change", function () {
if (state.value === "") {
btnEstimate.setAttribute("disabled", "disabled");
btnEstimate.value = "Please select your state first!";
} else {
btnEstimate.removeAttribute("disabled");
btnEstimate.value = "Estimate Total";
}
});
// }, false);
})();
以下代码不起作用:
(function () {
"use strict";
var state = document.getElementById("s-state");
var btnEstimate = document.getElementById("btn-estimate");
document.addEventListener("load", function() {
btnEstimate.setAttribute("disabled", "disabled");
btnEstimate.value = "Please select your state first!";
state.addEventListener("change", function () {
if (state.value === "") {
btnEstimate.setAttribute("disabled", "disabled");
btnEstimate.value = "Please select your state first!";
} else {
btnEstimate.removeAttribute("disabled");
btnEstimate.value = "Estimate Total";
}
});
}, false);
})();
所以,最大的问题是为什么???
为什么在其中包装代码:
So, the big question is WHY??? Why is wrapping the code around in this:
document.addEventListener("load", function() {
}, false);
阻止它工作吗?
没有任何意义,对吗?
首先,我认为问题出在我使用的是 DOMContentLoaded,但不是。使用加载会产生相同的结果:无效代码。
prevent it from working? That doesn't make any sense, does it? First, I thought the problem was me using 'DOMContentLoaded' but nope. Using 'load' produces the same result: non-working code.
大谜团!
以下是我原来的代码片段:
Here's the snippet with the code I actually had originally:
(function () {
"use strict";
var state = document.getElementById("s-state");
var btnEstimate = document.getElementById("btn-estimate");
document.addEventListener("load", function() {
btnEstimate.setAttribute("disabled", "disabled");
btnEstimate.value = "Please select your state first!";
state.addEventListener("change", function () {
if (state.value === "") {
btnEstimate.setAttribute("disabled", "disabled");
btnEstimate.value = "Please select your state first!";
} else {
btnEstimate.removeAttribute("disabled");
btnEstimate.value = "Estimate Total";
}
});
}, false);
})();
<div class="group state">
<label for="s-state">State (required):</label>
<select id="s-state" required>
<option value="">- select -</option>
<option value="CA">California</option>
<option value="IL">Illinois</option>
<option value="NH">New Hampshire</option>
<option value="PA">Pennsylvania</option>
</select>
</div>
<p>
<label for="btn-estimate">Click to estimate:</label>
<br>
<input type="submit" value="Estimate Total" id="btn-estimate">
</p>
推荐答案
使用本地javascript解决此问题的3种可能方法:
3 possible ways to resolve this issue using native javascript:
- 使用
document.addEventListener
window.addEventListener > - 使用
DOMContentLoaded
这样的document.addEventListener( DOMContentLoaded,function(event){});
- 使用
window.onload = function(){}
- using
window.addEventListener
insted ofdocument.addEventListener
- using
DOMContentLoaded
like thisdocument.addEventListener("DOMContentLoaded", function(event) {});
- using
window.onload = function() {}
这篇关于为什么addEventListener加载会阻止代码正常工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!