I looked around on how to grab text from an input box using javascript and all the post said to use .value, however, I keep getting "undefined". I think the problem is when I use the .value it looks for the value = " " in the input tag and when it sees that there isn't any it gives me back "undefined"

I'm trying to grab the text the user writes and put it in an alert.

HTML:

<input id='myText' type="text">
<input id = 'bot'type="button" value="Click Me">

JS:

var textValue = document.querySelector("#myText").value;
var clickBot = document.querySelector("#bot")

clickBot.addEventListener("click",function(){
alert(textValue)
})

If I type:

<input id='myText' type="text" value = 'works'>

Then when I click the button I will get an alert saying "works"

I looked around on how to grab text from an input box using javascript and all the post said to use .value, however, I keep getting "undefined". I think the problem is when I use the .value it looks for the value = " " in the input tag and when it sees that there isn't any it gives me back "undefined"

I'm trying to grab the text the user writes and put it in an alert.

HTML:

<input id='myText' type="text">
<input id = 'bot'type="button" value="Click Me">

JS:

var textValue = document.querySelector("#myText").value;
var clickBot = document.querySelector("#bot")

clickBot.addEventListener("click",function(){
alert(textValue)
})

If I type:

<input id='myText' type="text" value = 'works'>

Then when I click the button I will get an alert saying "works"

• javascript
• html

4 Answers 4

You need to get the value in the text field inside the click handler; otherwise, you're just going to have the same value every time the handler runs:

var clickBot = document.querySelector("#bot")

clickBot.addEventListener("click",function(){
    var textValue = document.querySelector("#myText").value;
    alert(textValue);
})

The value of the textValue variable is being set only once, on page load. Since the value of the myText input is empty then, an empty value will be stored inside the textValue variable and will remain in that state.

To avoid that problem - pass it inside the function body to refresh the textValue value with every click event.

var clickBot = document.querySelector("#bot"),
    textValue = document.querySelector("#myText");

clickBot.addEventListener("click", function() {
  alert(textValue.value);
})

<input id='myText' type="text">
<input id='bot' type="button" value="Click Me">

The variable textValue is already initialized as undefined outside the event listener. You need to reassign that value every time that button is clicked.

I would suggest using textValue to store the selector and then using textValue.value in the alert.

var textValue = document.querySelector("#myText");
var clickBot = document.querySelector("#bot");

clickBot.addEventListener("click", function(){
   alert(textValue.value);
});

var myText=document.querySelector("#myText");
myText.addEventLisrener("change",function(){
   var textValue = document.querySelector("#myText").value;
});

var clickBot = document.querySelector("#bot")
clickBot.addEventListener("click",function(){
   alert(textValue);
});

You have to update the value of your myText after the user changed something.