更新:我最初有
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
- 使用 DOMContentLoaded 这样的 document.addEventListener( DOMContentLoaded,function(event){});
- 使用 window.onload = function(){}
- using window.addEventListener insted of document.addEventListener
- using DOMContentLoaded like this document.addEventListener("DOMContentLoaded", function(event) {});
- using window.onload = function() {}
更多推荐
为什么addEventListener加载会阻止代码正常工作?
发布评论