Javascript Error: 'document' is not defined. [no-undef]

Question

I'm an absolute beginner in JS.

following is the Javascript code:

   var blank = document.getElementsByClassName("my-input");

   var go = document.getElementById("go-button");

   console.log(blank);
   go.innerHTML = "Hello" + blank[0].value;

I use the IDE Brackets, whereas, I'm learning from a online course in which the teacher uses IDE Sublime text (he is not getting any errors) I dont think IDE's make much of a difference, but mentioning.

What I want to achieve is:

A blank input box(with placeholder as "Your name") and a button (go button) After typing the name, when we click the go button, text is displayed below the button as: Hello {name}

Answer 1

This works, but you need to be sure to add an event listener, so the code can grab the input value after it has been entered by the user:

 var go = document.getElementById("go-button"); go.addEventListener("click", doFunc); function doFunc() { var blank = document.getElementsByClassName("my-input"); go.innerHTML = "Hello " + blank[0].value; } 

 <input class="my-input" /><br /> <input class="my-input" /><br /> <input class="my-input" /><br /> <button id="go-button">Go</button> 

Answer 2

If you want to display the text below the button you need an element to select (or inject it right after the button element).

  var blank = document.getElementsByClassName("my-input"); var go = document.getElementById("go-button"); go.addEventListener('click', function() { document.querySelector('.result').innerHTML = "Hello" + blank[0].value; }); 

 <input class="my-input" /> <button id="go-button">click me</button> <p class="result"></p>