How can I get my input value from input field in a div using JavaScript

Question

I am trying to get the value from an input field and display it using a div tag, but it's not displaying anything. Where am I wrong?

var num = document.getElementById("inputNum").value;
var numbersList = document.getElementById('numbers').innerHTML = num;

<input type="text" id="inputNum">
<div id="numbers">
</div>

Answer 1

Here is the code,

HTML

<input type="text" id="inputNum">

<div id = "numbers">

</div>

Javascript

var num = document.getElementById("inputNum");
var numbersList = document.getElementById('numbers');

num.onkeyup= function(e){
 numbersList.innerHTML = e.target.value;
}

keyup will detect every key that is being typed and it will display to the div

Answer 2

Use a onkeyup event. This will give you ever character from text box. After getting the value you can easily set it using innerHTML . Consider the following snippet:

 <script> function setValue(){ var num = document.getElementById("inputNum").value; document.getElementById('numbers').innerHTML = num; } </script> <input type = "text" id ="inputNum" onkeyup="setValue()"> <div id = "numbers"> 

Answer 3

So a few things is happening below.

First, we ensure that the whole page is loaded. Why? If your script is loaded at the beginning, it may have troubles accessing the DOMs ( input , textarea , div , etc). Of course, if you load the Javascript at the botton of your page, you can skip such issue.

However, I decided to implement the (function() {...}); self-execute function. This will ensure your Javascript runs after the page its loaded.

Then, I added an event listener to the DOM object of inputNum . This listener will keep an eye to keyup events of your keyword. Each time a key goes up, after being pressed, it will run the code inside the function.

 // This function will execute when the whole page is loaded // This means that all the DOMs (such as your input and div) will be available (function() { var inputNum = document.getElementById("inputNum"); inputNum.addEventListener("keyup", function(){ var num = inputNum.value; document.getElementById('numbers').innerHTML = num; }); })(); 

 <input type = "text" id ="inputNum"> <div id = "numbers"></div> 

Note: I could have use the attribute keyup='' in the input field; however, I decided to give you an answer that provides 100% control. In this way, you can decide which type of event is more appropriate to the project you are working with.

Answer 4

In var numbersList = document.getElementById('numbers').innerHTML = num; just omit var numbersList = . Code document.getElementById('numbers').innerHTML = num; will set innerHTML of Element with Id = "numbers" and will not return anything. Your code will be:

var num = document.getElementById("inputNum").value;
document.getElementById('numbers').innerHTML = num;

or just

document.getElementById('numbers').innerHTML = document.getElementById("inputNum").value;

Answer 5

You have a few problems, and your needs aren't totally clear, but hopefully this will help. Here are the things I fixed:

This line

var numbersList = document.getElementById('numbers').innerHTML = num;

contains an error because it has two equals signs. I replaced it with two lines, first identifying the element and saving it to the variable numbersList , then setting the innerHTML property of numbersList to the num discovered above.

Secondly, the javascript you've written will presumably run once, when the page is loaded. At that time the input contains no text, so there's nothing to copy to the div . Depending on what you're trying to do, there are a few ways to handle this, but as one example, I've put the code you wrote (with the above fix) into a function, then added a button and assigned the function to run when the button is clicked.

Please let me know if you have any questions.

 function copyVal() { var num = document.getElementById("inputNum").value; var numbersList = document.getElementById('numbers') numbersList.innerHTML = num; } document.getElementById('copy').onclick = copyVal; 

 <input type = "text" id ="inputNum"> <div id = "numbers"></div> <button id="copy">copy text</button> 

Answer 6

var num = document.getElementById("inputNum");
var numbersList = document.getElementById('numbers');

num.addEventListener('change', function(){
  numbersList.textContent = this.value;
})

Answer 7

Try this:

var num = document.getElementById("inputNum").value;
document.getElementById('numbers').innerHTML = num;