Javascript在HTML页面中不起作用

嘿，我有一个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>  

var按钮=document.getElementById（“btnsave”）；
addEventListener（“单击”，函数（）{
if（modernizer.localstorage）{
//window.localStorage可用！
var drinksElement=document.getElementById（“饮料”）；
对于（变量i=0；i

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

---

提前感谢，这已经困扰了我很长时间。

您的

modernizer

参考和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> 

var按钮=document.getElementById（“btnsave”）；
addEventListener（“单击”，函数（）{
if（modernizer.localstorage）{
//window.localStorage可用！
var drinksElement=document.getElementById（“饮料”）；
对于（变量i=0；i

根据规范-

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

---

此外，根据，但是用户代理不理解

标记，将其显示为简单的HTML内容。

您的

Modernizer

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

var按钮=document.getElementById（“btnsave”）；
addEventListener（“单击”，函数（）{
if（modernizer.localstorage）{
//window.localStorage可用！
var drinksElement=document.getElementById（“饮料”）；
对于（变量i=0；i

根据规范-

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

---

此外，根据，但是，用户代理不理解

标记，将其显示为简单HTML内容。

粘贴返回的确切错误。这是返回的错误：VM120:1未捕获引用错误：按钮未定义在：1:1如果我复制脚本并将其粘贴到控制台中，则不会出现此错误，但粘贴exac返回错误。这是返回的错误：VM120:1 Uncaught ReferenceError:按钮未定义在：1:1如果我将脚本复制并粘贴到控制台中，我不会收到此错误，尽管我不敢相信我完全忽略了这一点！非常感谢。有时让其他人查看代码确实很有帮助。即使我一开始就错过了它。：）。发生。如果答案有助于成为世界的一个好答案，请接受。应该解释的是，

某些内容之间的内容

由于给定的

src

属性而从未执行过。但是，不理解

标记的用户代理将其显示为简单的HTML内容。因此可以编写类似于“你的浏览器不支持脚本”的东西。我认为很明显，询问者知道这一点。我仍然会将其添加到asnwer。感谢你的建议。我不敢相信我完全忽略了这一点！非常感谢。有时让其他人查看代码真的很有帮助。甚至我一开始就错过了它。：）。发生。如果答案有助于成为世界的一个好答案，请接受。应该解释的是，

某些内容之间的内容

由于给定的

src

属性而从未执行过。但是，不理解

标记的用户代理将其显示为简单的HTML内容。因此可以编写类似“你的浏览器不支持脚本”的东西。嗯，我认为询问者很明显知道这一点。我仍然会将其添加到asnwer中。谢谢你的建议。