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>，

如果有 src 属性，则该元素必须为空或仅包含也符合脚本内容限制的脚本文档。

另外，根据@QuasimodosClone，然而，它被不理解<script>标签的用户代理显示为简单的HTML内容。