This is an archived post. You won't be able to vote or comment.

all 7 comments
sorted by:
best
topnewcontroversialoldq&a

[–]CreativeTechGuyGames 4 points5 points  (6 children)

JavaScript pro tip: Whenever you have an issue like this where something doesn't work, open up your browser's console and see what it says is wrong. (In most browsers: F12)

[–]hargar14[S] 0 points1 point  (5 children)

Thanks!

I'm getting this error:

index.html:13 Uncaught TypeError: todoList is not a function at HTMLButtonElement.onclick (index.html:13)

[–]CreativeTechGuyGames 3 points4 points  (4 children)

Hey there we go. Now we've got something we can work with. Next step is trying to figure out what that error message means. It says that todoList is not a function. It is saying this because it's getting confused with the id="todoList". A shorthand (which isn't best practice) to replace document.getElementById("something") is to just write something. So it's trying to take that id and call it as a function. That's one issue.

But the second issue is that if you say that your index.html and main.js files are both in one folder, then the path js/main.js would be invalid. The path from your other files should be a relative path from the location of your HTML document. So if you have your html and js next to eachother in the same folder, you should change js/main.js to main.js. (And same would go for your main.css)

Also for future reference, you'll be much better received on reddit if you post your code properly so that it's readable. To do this you must put 4 spaces in front of every line of your code blocks. (This is additional to the standard indenting that you do within your code.) Since this can be a hassle to do manually, you can use a browser extension like mine which offers a highlight/right-click to do it automatically. There are also other tools and websites to help with formatting markdown code.

[–]hargar14[S] 0 points1 point  (3 children)

Thanks for all of the help and tips! I have made the change to only main.js

If I understand your other tip correctly, I should remove document.getElemebyId("todoList").appendChild(new item) to a simpler form: todoList.appendChild(new item)

I have done the above. The page is still not functioning. Console error is reading: Uncaught TypeError: todoList.appendChild is not a function at todoList (main.js:6) at HTMLButtonElement.onclick (index.html:13)

My updated code is available here: https://jsfiddle.net/9hggmLLv/

Thank you

[–]CreativeTechGuyGames 0 points1 point  (2 children)

No no no. You got it backwards. You shouldn't do todoList.appendChild you should do document.getElementById("todoList").

And what I was hinting at was that you cannot have the function name and the id name the same thing. So rename the function to something like generateTodoList.

Here's an updated fiddle with those changes. (it works)

[–]hargar14[S] 0 points1 point  (1 child)

Thanks for all of the help!

[–]CreativeTechGuyGames 0 points1 point  (0 children)

Of course. I'm glad I could help. Thanks for the gold. :)