无法读取未定义的属性“值”？答案

【问题标题】：Cannot read property 'value' of undefined?无法读取未定义的属性“值”？
【发布时间】：2011-08-25 08:05:22
【问题描述】：

为了学习 JavaScript，我正在编写一个小型文本编辑器 Google Chrome 扩展程序。但我不断收到此错误：Cannot read property 'value' of undefined。每当调用tranquility.save(); 时都会发生这种情况，但不会在tranquility.open(); 被调用时发生，这很奇怪，因为它们基本相同，只是换了边。 paper 只是一个<textarea>。

var tranquility = {
 paper: document.getElementById("paper"),
 lastOpenedPaper: localStorage.getItem("lastOpenedPaper"),

 listen: function() {
    this.paper.addEventListener("keyup", this.save, false);
 },

 save: function() {
    localStorage.setItem(this.lastOpenedPaper, this.paper.value);
 },

 open: function() {
    this.paper.value = localStorage.getItem(this.lastOpenedPaper);
 }
}

编辑：

在创建<textarea> 之后调用它（除非它必须是整个 DOM）

<body>
    <textarea id="paper"></textarea>
    <script src="../js/application.js"></script>
    <script>
        tranquility.listen();
    </script>
</body>

【问题讨论】：

似乎document.getElementById("paper") 正在返回未定义。
这个答案可能对你有用：stackoverflow.com/questions/415602/…

标签： javascript

【解决方案1】：

我得到了它与两个修复工作

1.) 加载纸张文本区域后编写脚本。这是通过将脚本放在正文的末尾来完成的。

2.) 我发现 localStorage.setItem 和 localStorage.getItem 应该像 http://hacks.mozilla.org/2009/06/localstorage/ 那样引用变量名。在您的代码中，lastOpenedPaper 将在开始时引用 null 值，因此它不会以该名称存储值，因此我尝试将其替换为 just。您也可以使用其他 var name 或直接使用 varname 作为localStorage.setItem('anyvarname', this.paper.value);

代码：

<script>
    var tranquility = {
     paper: document.getElementById("paper"),
     lastOpenedPaper: 'just',

     listen: function() {
        this.paper.addEventListener("keyup", this.save, false);
     },

     save: function() {
        localStorage.setItem(this.lastOpenedPaper, this.value);
     },

     open: function() {
        this.paper.value = localStorage.getItem(this.lastOpenedPaper);
     }
    }
</script>

【讨论】：

我已经准备好完成#1，并且我已经准备好手动设置 lastOpenedPaper 等于 test，并手动创建 test 并使其等于某个任意字符串。加载工作正常，这意味着所有变量都指向正确，只是保存很奇怪。
您可以将您的代码粘贴到 pastebin 或 fiddle.net 中以便我们检查它...尝试在保存中添加 dubuggind 代码，例如 consol.log 或 alert
它和我粘贴的完全一样，除了html（不包括加载当前空白.css的head标签，这不会导致问题）
我通过在保存功能中将 this.paper.value 更改为 this.value 使其工作。我希望 textarea 调用了代码保存功能，因此替换了 this 对象

【解决方案2】：

它发生在任何时候宁静。保存（）；被调用，但不是当宁静.open();这是很奇怪，因为它们基本上是一样，只是换边了。

啊，但它们不一样，因为：

save: function() {
    localStorage.setItem(this.lastOpenedPaper, this.paper.value);
},

这可能不太好，因为无法定义 this.paper.value

open: function() {
    this.paper.value = localStorage.getItem(this.lastOpenedPaper);
}

这是将值设置为this.paper.value，因此是否定义无关紧要。

还有：

document.getElementById("paper")

如果此代码未声明 onload 或在创建 <textarea> 之后，这将不起作用，因为尚未构建 DOM 树。

【讨论】：

在<textarea>创建后调用