Changing innerHTML based on input value

Question

This is the HTML code:

<body>
  <form>
    <input id="input" type="text" name="input" value="Enter Here">
    <input type="submit" value="Submit">
  </form>
  <div id="display">
  </div>
</body>

This is the JavaScript:

input = document.getElementById("input");
if (input.value == "Hello") {
  display.innerHTML = "Hello";
} else {
  display.innerHTML = "Type";
}

When I change the input value by clicking on the input field and typing "Hello", it does not display "Hello" in display.innerHTML. I would like it to display "Hello" when "Hello" is typed into the input field. That's a lot of "Hello"'s! Any help would be great! Thanks in advance.

When are you running this JavaScript? On page load? Then it will run before the user has a chance to type anything, but never again. — elixenide
– elixenide, Commented Dec 14, 2016 at 16:23

LellisMoon · Accepted Answer · 2016-12-14 16:28:48Z

1

var input = document.getElementById("input"),
  display=document.getElementById("display");
input.oninput=function(){
  if (input.value === "Hello") {
  display.innerHTML = "Hello";
} else {
  display.innerHTML = "Type";
}
};

    <input id="input" type="text" name="input" value="Enter Here">
  <div id="display">
  </div>

answered Dec 14, 2016 at 16:28

LellisMoon

5,0282 gold badges14 silver badges25 bronze badges

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

Comments

Ray · Accepted Answer · 2016-12-14 16:25:58Z

0

Your javascript code only gets executed once before you have entered anything in the input field.

You need to either setup a change handler for the input field or a submit handler for the form and set display.innerHTML.

Also, did you miss a display = document.getElementById("display");?

answered Dec 14, 2016 at 16:25

Ray

315 bronze badges

Comments

Mauricio Arias Olave · Accepted Answer · 2016-12-14 17:03:03Z

0

If you want use your button for submit the value of your textbox (your input type text-field) use onclick event as follows:

function displayData() {
  var div_display = document.getElementById('display');
  /* This is your input, but you shoud use another Id for your fields. */
  var textValue = document.getElementById('input').value;
  

  /* Change the inner HTML of your div. */
  div_display.innerHTML = textValue;
}

<input id="input" type="text" name="input" value="Enter Here" />
<input type="submit" value="Submit" onclick="displayData();" />

<div id="display">
</div>

Hope it helps.

answered Dec 14, 2016 at 17:03

Mauricio Arias Olave

2,6754 gold badges30 silver badges77 bronze badges

Collectives™ on Stack Overflow

Changing innerHTML based on input value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related