Question

我正在Framework7上创建一个应用程序，我正在尝试添加一个部分，您可以在其中将文本提交到浏览器的本地存储。如果我使用表单并在我的index.html页面上提交数据它可以正常工作，但是如果我在任何其他页面中使用它，我会得到'Uncaught TypeError：无法读取属性'addEventListener'的null'。我将每个页面底部的脚本src链接到同一个地方，所以我不知道为什么我会收到这个错误。

HTML

<form>
  Text: <br>
  <input type="text"   id="Input"       name="addText"> <br>
  <button id="Submit">Save</button>
</form>

的Javascript

var submit = document.getElementById("Submit");

    submit.addEventListener("click", function ()
    {
        var Input = document.getElementById("Input").value;
        localStorage.setItem("Text", Input);
        alert("Your text has been saved");
        console.log("Text saved");
    } , false);

Answer 1

这种情况发生在你这样做的时候：

var submit = document.getElementById("Submit");

submit变为null，因为提交按钮在其他页面中不可用。

快速解决方案是确保当前页面中是否存在提交按钮，然后才添加事件监听器。

if(submit){
    submit.addEventListener("click", function () {
        var Input = document.getElementById("Input").value;
        localStorage.setItem("Text", Input);
        alert("Your text has been saved");
        console.log("Text saved");
    } , false);
}

Answer 2

Framework7有一个像jQuery这样的特色，它叫做dom7或$$。您可以使用以下功能：

$$("#Submit").on("click",function() {
  var Input = $$("Input").val();
  localStorage.setItem("Text", Input);
  alert("Your text has been saved");
  console.log("Text saved");
});

查找文档here

接收'未捕获的TypeError：无法在除索引之外的所有页面上读取'null'的属性'addEventListener'？

2 个答案: