How do I get user input from input area with Java Script and assign to a variable?

Question

I'm trying to make a simple mad libs type game. To do so I need to do the following:

Have space that user can input text
Retrieve text that user inputted
Assign text to variables using Javascript
Place variables in Mad libs

I know how to do this using something like:

var userAnswer = prompt("Give me an answer");

However, I want to get the input from a text input field. I was trying to do the following but I got stuck:

Have input area with id="input1"
Create function that takes content of #input1 and assign to a variable.
Use button to run the function

I will then later use these variables in my story

<label for='input1'>Verb + ing</label><input id='input1'>

<script>
    var setInputs = function() {
        var space1 = document.getElementById("input1").innerHTML;
    }
</script>

<button onclick="setInputs">Click me</button>

I'm I going about this the correct way?

Fiddle: http://jsfiddle.net/6rjf5k9n/

document.getElementById("input1").value

Zoey Mertes
– Zoey Mertes

2014-09-05 04:22:09 +00:00
Commented Sep 5, 2014 at 4:22 — Zoey Mertes
– Zoey Mertes, Commented Sep 5, 2014 at 4:22

Karan Patyal · Accepted Answer · 2014-09-05 04:29:30Z

1

Try This

<label for='input1'>Verb + ing</label><input id='input1'>

        <script>
        var setInputs = function() {
            var space1 = document.getElementById("input1").value;
            alert(space1);
        }


        </script>
             <button onclick="setInputs()">Click me</button>

.value gives you the currently-set value of a form element (input, select, textarea), whereas .innerHTML builds an HTML string based on the DOM nodes the element contains.

answered Sep 5, 2014 at 4:29

Karan Patyal

4914 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Over a year ago

Awesome! I just had to use ".value" and then I just used document.getElementById("answers").innerHTML = space1; afterwards. However, when I call "space1" in my JS console I get "space1 is not defined." It works for me, I was just wondering why it shows as not defined in the console.

Collectives™ on Stack Overflow

How do I get user input from input area with Java Script and assign to a variable?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related