Get text content and write to HTML with JavaScript

Question

I am trying to make a little game thing where you can enter words and such, but the main issue is that when I try to make JavaScript print out the words I write; it doesn't ever work properly! Here is my HTML:

<input id="verb" name="verb" type="text" placeholder="Enter a verb">
<input id="noun" name="noun" type="text" placeholder="Enter a noun">
<button onclick="getWords()">Enter</button>
<p id="output"></p>

And here's the JavaScript to go with it:

var verb = document.getElementById("verb").textContent;
var noun = document.getElementById("noun").textContent;
      function getWords()
      {
          document.getElementById("output").textContent = "You chose " +verb+ " as your verb, and " +noun+ " as your noun";
      }

When you click the enter button in Google Chrome; it simply says that "You chose undefined as your verb, and undefined as your noun."
Why doesn't it recognize the contents of the elements and just fill them with "undefined," no matter what is entered? Is there an easier way to do this? Thanks in advance!

Move the verb and noun accessions to the inside of your getWords function. — Dai
– Dai, Commented Jul 28, 2014 at 21:15
try document.getElementById("id").val(); and document.getElementById("id").val("your value"); instead — Wold
– Wold, Commented Jul 28, 2014 at 21:15
@Wold - There is no JavaScript .val() function. Thinking of jQuery perhaps? — j08691
– j08691, Commented Jul 28, 2014 at 21:16
oh right, of course you'd need to use jQuery for that to work. — Wold
– Wold, Commented Jul 28, 2014 at 21:17

Hunter Larco · Accepted Answer · 2014-07-28 21:14:28Z

2

Try

  function getWords()
  {
      var verb = document.getElementById("verb").value;
      var noun = document.getElementById("noun").value;
      document.getElementById("output").innerHTML = "You chose " +verb+ " as your verb, and " +noun+ " as your noun";
  }

value holds the text in an input whereas innerHTML represents the HTML in an element. Therefore you need to read the values of the inputs and store them in the HTML of the paragraph element.

answered Jul 28, 2014 at 21:14

Hunter Larco

8005 silver badges19 bronze badges

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

3 Comments

Ben Aston Over a year ago

You will need to move the variable declarations into the function getWords (IIUC)...

Hunter Larco Over a year ago

i forgot to move the verb and noun declarations into the getWords scope, thanks

Cole Z. Over a year ago

This is right; I used this code and moved the variable accessions inside the function and it worked! You guys were 100% correct with this, thank you.

Dan · Accepted Answer · 2014-07-28 21:19:55Z

0

You're very close. In your html, try to use

    function getWords() {

    var verb = document.getElementById("verb").value;
    var noun = document.getElementById("noun").value;

      document.getElementById("output").innerHTML = "You chose " + verb + " as your verb, and " + noun + " as your noun.";
    }

This is the way you need to do it - the way you have written your code, the vars verb and noun are never read. by including them inside the function getWords(), you ensure that the value will only be looked at AFTER the user has clicked the button.

answered Jul 28, 2014 at 21:19

Dan

2121 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

Get text content and write to HTML with JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related