How Can I Store the Value of a Text Input Box in a Variable?

JavaScript
#1

Hi,

This is driving me up the wall, I have tried various solutions to try and get the input into a text box to store to a variable on submit.

My current code is:

function getInput() {
    var userInput = document.getElementById('userInput').value;
}  

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', userInput, false);

With the HTML:

<div class="input-group mb-3">
        <input type="text" class="form-control" id="userInput" placeholder="Search">
        <div class="input-group-append">
          <button class="btn btn-secondary" id="subButton">Search</button>
        </div>
      </div>

This should return the text that is entered into the text field but when logged to the console I get the element returned instead of the value…

How can I get the search term store to a variable?

Thanks

#2

It looks like you are calling an undefined function called userInput. The function you defined is getInput. Also, to make sure it works, after you get the value, you can log it to the console like this:

console.log(userInput);

Everything else looks correct. :smiley:

#3

Hi,

Thanks for the response. Yes you’re right it should be:

function getInput() {
    var userInput = document.getElementById('userInput').value;
}  

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getInput, false);

But unfortunately my issue remains in that, all I get returned is the element and not the value entered in to the text box?

#4

subButton.addEventListener('click', userInput, false);

I think you mean to do

subButton.addEventListener('click', getInput, false);

https://codepen.io/br3ntor/pen/yZKyME?editors=1111

Look in console and you will see the input on click.

#5

I see this works in a sense, but not what I’m trying to do…

I need userInput to store the input, so then I can call on that variable…

Currently once this function has run, if you then console.log(userInput), it returns the element.

How can I make this .value stick in a variable?

#6

Did you make sure you access the value property? I see it’s in your code but are you actually typing something in the console? Like I actually said in the previous post, you can log it to the console directly in your code like this:

function getInput() {
    var userInput = document.getElementById('userInput').value;
    console.log(userInput);
}  

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getInput, false);
#7

Yes, this will return the string of the input box to the console.

But then if you try console.log(userInput) again, you will receive the element instead of the value I want.

#8

Oops, I was typing that at the same time… that response doesn’t quite make sense anymore for a reply to that. If you want to store it globally, instead of saying var userInput = value, you can say window.userInput = value. Then you can use that anywhere

#9

Like this?

function getInput() {
    window.userInput = document.getElementById('userInput').value;
}
#10

Yes, that should work. :smiley:

#11

Sorry, I’m probably being dumb here, a little new to this :slight_smile:

How would I then get that back as it is no longer stored in a variable?

#12

I added a variable outside the scope of your function and the function now sets this variable to the user input as well.

After the click you can access that in the console and avoid having to add it to the window object which you generally don’t want to do.

This is an issue/behavior of scope. A variable declared inside a function will only be available in the functions scope.

1 Like
#13

It is stored globally, so you can use it anywhere in your code. For example, you could display an alert:

function getInput() {
    window.userInput = document.getElementById('userInput').value;
    console.log(userInput);
    alertUserInput();
}  

function alertUserInput() {
    alert(userInput);
}

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', userInput, false);

You don’t need the window. prefix later. :smiley:

2 Likes
#14

Perfect! Thank you for the help.

#15

@br3ntor: Yes, that is another option.

#16

I think it is better because settings variables on the window object is considered polluting the global scope.

For @daz1uk here are a couple resources on scope.

https://developer.mozilla.org/en-US/docs/Glossary/Scope

https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope–closures

1 Like
#17

Thanks for the help on this both of you, very much appreciated!! :+1:

1 Like
#18

@br3ntor: Yes, that is actually a better option.

#19

Hi,

I still haven’t managed to get this to work with what I’m trying to do.

I am trying to store the input text from a search field into a variable, so that variable can then be used as part of an API query.

I have setup a codepen. If someone could take a look and advise how I can achieve what I’m attempting to do?

#20

The way you have it now, when the document loads, searchQ will be assigned to searchBox's value, which would be nothing at that time, but that is not what you want, you want searchQ to be assigned the value when the user clicks, your click event triggers the userInput() function, that’s when you want to get the value of the search box, so, move your assignment inside but before the fetch of the userInput() function, that way, as soon as the user clicks the searchBox‘s variable is attached to searchQ , then you can do your fetch, btw your api endpoint ain’t workin’, i don’t think…