未捕获的TypeError：无法读取未定义的属性foo

Question

My JavaScript:

todo.completed = !todo.completed;

ERROR:

Uncaught TypeError: Cannot read property 'completed' of undefined
    at Object.toggleCompleted (script.js:34)
    at Object.toggleCompleted (script.js:89)
    at HTMLButtonElement.onclick ((index):33)
toggleCompleted @ script.js:34
toggleCompleted @ script.js:89
onclick @ (index):33

Am I missing something here?

Answer 1

It looks like you haven't declared the variable todo yet. Try something like todo = {}; Let me know if you have questions!

Answer 2

The variable todo has passed out of scope . It's probably declared in a function that is outside the closure of handlers.toggleCompleted() when it is called.

There are a couple of ways to fix this, but as the simplest you can just make todo global:

1. Find var todo and remove var from the start.
2. At the top of your JS add var todo = {};

This will make todo a global object that's always defined on your page.

Answer 3

What's so confusing about it is that the code will work in Plunkr, glitch or codepen, but not a text editor and browser, because of the way those sites's routing is set up. In your index.html file you need to replace <script src = "filename.js></script> with <script src="entire path to filename.js"></script>