Cannot read property 'value' of undefined?

Question

To learn JavaScript I am writing a small text editor Google Chrome extension. But I keep getting this error: Cannot read property 'value' of undefined. It happens whenever tranquility.save(); is called, but not when tranquility.open(); which is weird because they are basically the same, just switched the sides. paper is just a <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);
 }
}

EDIT:

It is called after <textarea> is created (unless it has to be the entire DOM)

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

Seems like `document.getElementById("paper")` is returning undefined. — Eduardo, May 14 '11 at 00:32
This answer may be of use to you: http://stackoverflow.com/questions/415602/set-value-of-textarea-in-jquery/416295#416295 — Orbling, May 14 '11 at 00:34

KoolKabin · Accepted Answer · 2011-05-14T01:41:22.070

3

I got it working with two fixes

1.) Write the script after loading of paper textarea. It was done by placing script at the end of body.

2.) I found localStorage.setItem and localStorage.getItem should refer to the variable name like in http://hacks.mozilla.org/2009/06/localstorage/ . In your code lastOpenedPaper would refer to null value in begining so it won't store value in that name so i tried replacing it with just. you can use other var name too or use varname directly as localStorage.setItem('anyvarname', this.paper.value);

code:

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

edited May 14 '11 at 01:41

answered May 14 '11 at 00:50

KoolKabin

17,157
35
107
145

I had all ready done #1, and I had all ready manually set lastOpenedPaper equal to test, and manually created test and made it equal some arbitrary string. The load works fine, which means all the variables are pointing correctly, just save is being weird. – Dr Hydralisk May 14 '11 at 01:00
can you paste your code in pastebin or fiddle.net so we can check it ... try adding dubuggind code in save like consol.log or alert – KoolKabin May 14 '11 at 01:02
it is the exact same as what I pasted except for the html (does not include head tag that loads a currently blank .css, which could not cause problem) – Dr Hydralisk May 14 '11 at 01:14
i got it working by changing this.paper.value to this.value in save function. i hope thats code save function is being invoked by textarea so replaces the this object – KoolKabin May 14 '11 at 01:41

score 1 · Answer 2 · answered May 14 '11 at 00:43

It happens whenever tranquility.save(); is called, but not when tranquility.open(); which is weird because they are basically the same, just switched the sides.

Ah but they're not the same because:

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

This is potentially not okay, because this.paper.value could not be defined

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

Where this is setting a value to this.paper.value, so it being defined or not doesn't matter.

Also:

document.getElementById("paper")

This won't work if this code is not declared onload or after the <textarea> is created, because the DOM tree hasn't been built otherwise.

It is called after `` is created – Dr Hydralisk May 14 '11 at 00:53 — Dr Hydralisk, May 14 '11 at 00:53

Cannot read property 'value' of undefined?

2 Answers2