Javascript - Display input inside div

Question

So this is probably an easy one, but I'm just not doing it right. My goal is to send the user input from this textbox:

<input type='text' placeholder='Form Name...' id='formNameInput' required>

Into this Div:

<div id="code_output"></div>

I'm trying to make it appear in real time, and so far I used this to try and do so, but it doesn't work:

document.getElementById("code_output").innerHTML += document.getElementById("formNameInput").value;

Why doesn't it show? Does my code need something to trigger the Javascript?

working for me, do you have any console error? do you want to show value in div after any trigger ? — Farhan
– Farhan, Commented Mar 19, 2018 at 18:07
" in real time" so you need a change event or keyup on your input. — Michael
– Michael, Commented Mar 19, 2018 at 18:09
Where do you call that line of JavaScript? It does not magically keep running, you need to tell it to run. — epascarello
– epascarello, Commented Mar 19, 2018 at 18:09

Tom O. · Accepted Answer · 2018-03-19 18:09:39Z

2

You're close, but the issue is that you're not using an event handler. The script is executing your code once, as soon as possible (before you have the chance to enter anything into the text input). So, you have to add some sort of event listener so that the copying happens at the appropriate time. Something like below:

document.getElementById('formNameInput').addEventListener('keyup', copyToDiv);

function copyToDiv() {
  document.getElementById("code_output").innerHTML = document.getElementById("formNameInput").value;
}

<input type='text' placeholder='Form Name...' id='formNameInput' required>

<div id="code_output"></div>

answered Mar 19, 2018 at 18:09

Tom O.

5,9813 gold badges24 silver badges36 bronze badges

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

2 Comments

connexo Over a year ago

Use input instead of keyup.

Blind Roach Over a year ago

Thanks this worked like wonders. I also went and added onkeyup='myfunction()' to my input like someone else said and turned my JS code into a function and it worked as well. But whoever gave that answer deleted it before I could accept it.

callback · Accepted Answer · 2018-03-19 18:10:33Z

0

You need to do that whenever the value of formNameInput changes. For that you need an event.

Your code should look like:

document.getElementById("formNameInput").addEventListener('input', function () {
   document.getElementById("code_output").innerHTML += this.value;
});

answered Mar 19, 2018 at 18:10

callback

4,1221 gold badge35 silver badges57 bronze badges

Comments

Surya · Accepted Answer · 2018-03-19 18:12:32Z

0

function change() {
  document.getElementById("code_output").innerHTML = document.getElementById("formNameInput").value;
}

document.getElementById('formNameInput').onkeyup = change

maybe this is what you are trying?

answered Mar 19, 2018 at 18:12

Surya

1711 silver badge10 bronze badges

Comments

connexo · Accepted Answer · 2018-03-19 18:16:58Z

0

You need to attach an event listener to your input that executes a function any time an input event occurs on the field:

formNameInput.addEventListener('input', function(e) {
  code_output.textContent = e.target.value
})

<input type="text" placeholder="Form Name..." id="formNameInput" required />
<div id="code_output"></div>

Please note that the above code takes advantage of the fact that browsers automatically create a global variable for each element with a unique id attribute value, and this variable has the same name as the value of the id.

If the concept of events is new to you, this might be a good place to get started:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

edited Mar 19, 2018 at 18:16

answered Mar 19, 2018 at 18:11

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Collectives™ on Stack Overflow

Javascript - Display input inside div

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related