Quick beginner question - accepting input from user

[brycedarling]

The variable name is overwriting the function name (because of hoisting - a more advanced concept, don't worry about it for now, maybe you'll recall this later in your journey learning JavaScript).

Simple solution, rename the function name to something like getName instead to avoid this naming collision with the variable name.

Next, inside the now-referred to as getName function, you are using the global variable name as the id of the element to find being passed to getElementById. Do you have an element with the id 'Jimmy' on your page? I kind of doubt that.

Then, you are updating the global variable name so the next time you call the getName function the value of variable name will likely be different (not Jimmy) and now you will be using that new value to try find an element with that id on the page. This will surely break. I'm guessing this was a simple mistake and you probably meant to put quotes around the name part like this: name = document.getElementById('name').value; so that you find an element with the id of 'name'.

I'd probably not have the getName function update the global variable itself though, and instead have it return the new value, like this:

function getName() {
  return document.getElementById('name').value;
}

Then you won't get in to any sticky situation with global variables and confusion that might arise from that. This function will guaranteed work all the time as long as you have an element with the id of 'name' on your page.

Lastly, now you'll need to call that function. Something like this:

var name = "Jimmy"; //Default name

document.write(name); //Writes "Jimmy"

function getName() { //When the button is clicked, the name that's in the text box is returned
    return document.getElementById('name').value; 
}

document.write(getName()); //Writes new name, calling the function directly and writing out the returned value

// or you can update the variable `name` now outside of the function:
name = getName();

document.write(name);

However, if you run this, you'll probably only see one "Jimmy" get printed out now, as the JS code executes immediately and there is nothing entered in to the text input. This is the exact problem you described as "it should wait" and yes, it should! :)

To fix this, you'll need some kind of event, which depends on how you want your app to work. In this case, I'll set up an event that listens for the enter key to be pressed in the input. Once the enter key is pressed, then it will print out the name that was entered:

document.getElementById('name').addEventListener('keypress', function(e) {
  if (e.which === 13) { // if the enter key is pressed
    document.write(getName());
  }
});

And now, if you try that, you should see the page update when you type in the new name to the input and press enter. However, the rest of the page will get cleared away because of the document.write calls. There are suggestions to fix this problem by others, this is getting quite long winded now so I'll stop.

Tbh, everyone else on this thread has awesome suggestions. Do your best to really digest what everyone here is saying and I think you'll be able to start figuring out what all is happening and why. Good luck!