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 ian izaguirre
ian izaguirre
3,220 Points

Why does this event to console log a users input only work one time ?

This is my html

Enter any number <input id="user-input" type="text" /> 
<button id="check-user-input">Check</button>

This is my JavaScript

var checkUserInput = document.getElementById('check-user-input');
checkUserInput.addEventListener('click', runProgram, false );




function runProgram() {
    var userInput = document.getElementById('user-input');
    userInput = userInput.value;
    console.log(userInput);

}

*THE ABOVE CODE WORKS PERFECTLY *

I want to know why changing my JavaScript code to the following makes my code only work one time on button click and then produces an error when I try to click the button again?

var checkUserInput = document.getElementById('check-user-input');
checkUserInput.addEventListener('click', runProgram, false );



var userInput = document.getElementById('user-input');


function runProgram() {
    userInput = userInput.value;
    console.log(userInput);

}
Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points

When you take var userInput = document.getElementById('user-input'); out of the function, the first time you run it it takes the value inside 'user input'. Let's say you input the number 45. The second time you call your event listener your function is telling the program to make userInput equal to 45.value (meaning, you are trying to extract a value attribute from a number, which is impossible, and not from the element with the id of 'user-input' like it should be.

By putting the var userInput = document.getElementById('user-input'); back into your function, you will be restating userInput to its correct value every time.

If you want to leave var userInput = document.getElementById('user-input'); outside of the function it is probably better, but you just need to rewrite your function as: function runProgram() { console.log(userInput.value) } and it will work every time.

2 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

The core difference is that in your first example userInput is scoped to the runProgram function, meaning that it is created and only exists within that function, and gets redefined each time the function runs. In your second example you define userInput outside the function which makes it a global variable which exists regardless of the function.

The effect of this is that when you change the value of userInput in this line:

userInput = userInput.value;

That change does not only apply only to that run of the method. You make a permanent change to the value stored in the userInput variable. Which means that the next time the function runs userInput will not contain an HTML element like it did the first time, it will contain the string that you set it to during the first function run.

To demonstrate this you can simply place a console.log statement inside the function that shows of the change:

function runProgram() {
    console.log(userInput);
    userInput = userInput.value;
    console.log(userInput);
}

The first time the function runs it will print out the HTML element that was assigned to userInput, and the second time it will print out whatever number you entered the first time, since that is now what userInput contains even at the start of the function.

If you modify the code so that you don't actually change what is stored in userInput, like this:

function runProgram() {
    console.log(userInput.value);
}

Then you won't run into any problems.

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points

your runProgram function redefines userInput from the input element to its value. so the first time you click the button, it is redefined to whatever you typed in the input, say "word". the 2nd time you click, userInput is the string "word", not the input element. the value of a string is undefined. the 3rd time you click, userInput is undefined, and the value of undefined is a type error. you can simulate this in your console by evaluating the value of a string, as in 

"string".value

you get undefined, then enter 

undefined.value

you get the error.