JavaScript 无法在 HTML 页面中运行

Question

嘿，我有一个 HTML 页面，其中包含更新本地存储的 javascript 部分:

<script src="../../Website/json/modernizr.js" >
        var button = document.getElementById("btnsave");

        button.addEventListener("click", function(){
            if (Modernizr.localstorage) {
            // window.localStorage is available!
                var drinksElement = document.getElementById("drinks");

                for (var i = 0; i < drinksElement.length-1; i++) {
                    localStorage["box" + i] = drinksElement[i].value;
                }
            } else {
                // no native support for HTML5 storage :(
            }
        });        
</script>  

但由于某种原因，它没有做它应该做的事情。该页面加载良好，控制台上没有看到任何错误。如果我将此脚本复制并粘贴到开发人员控制台中，然后单击更新本地存储的按钮，本地存储将更新，但只更新一次，那么它似乎“忘记”了这个javascript函数。如果我将其复制并粘贴到控制台然后输入“按钮”，它将显示按钮变量。我可以继续输入“按钮”，它将继续显示按钮变量，直到我单击该按钮并更新本地存储。之后，再次调用按钮会返回引用未定义错误。

先谢谢了，这个问题已经困扰我很长一段时间了。

Answer 1

您的modernizr引用和 JavaScript 代码应该位于不同的脚本标记中。

<script src="../../Website/json/modernizr.js" ></script> 
<script> 
        var button = document.getElementById("btnsave");

        button.addEventListener("click", function(){
            if (Modernizr.localstorage) {
            // window.localStorage is available!
                var drinksElement = document.getElementById("drinks");

                for (var i = 0; i < drinksElement.length-1; i++) {
                    localStorage["box" + i] = drinksElement[i].value;
                }
            } else {
                // no native support for HTML5 storage :(
            }
        });        
</script> 

根据规范 - <script> ，

If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.

此外，根据@QuasimodosClone ，但是，不理解 <script> 的用户代理将其显示为简单的 HTML 内容标签。