Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Chris Feltus
Chris Feltus
3,970 Points

Storing HTML Value in a variable

I am working on a To Do list application. The outcome I am hoping for is when the add button is clicked it will store the value of the task input box within a variable.

You can view the codepen here: http://codepen.io/bluehabit/pen/YwWdKX, but the code that I am specifically referring to is this portion below. 

var taskInput = document.getElementById('new-task'); 

var addTask = function () {
    var holder = taskInput.value;
};

For example if I entered 'go shopping' into the task input box, and then clicked the add button, the new value for the holder variable should be 'go shopping'.

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

That's only for JQuery Jeremy, .value works with default JavaScript which he seems to be using here. I do recommend JQuery though, it makes this stuff a lot easier in my opinion.

2 Answers

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

Doesn't look like JavaScript knows when the button is being pressed. Try adding an onclick event to your button.

<button onclick="addTask()">Add</button>
Chris Feltus
Chris Feltus
3,970 Points

It should look towards the bottom of the JS file.

addButton.onclick = addTask;
Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

Oh okay. Well, addButton doesn't exist, at least in the pen you linked here. You would need to add an addButton id to the button element, and then write the onclick event like this -

document.getElementById("addButton").onclick = addTask;
Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

Shouldn't you be doing this with PHP? and ajax to make it more user friendly