JavaScript – Getting User Input

Reading User Input (value)
JavaScript can read text from an <input> element by using the value property of that element.

Example

<input id="word">
<button onclick="readWord()">Read Word</button>

<script>
function readWord(){
  let w = document.getElementById("word").value;
  console.log("You typed: " + w);
}
</script>

The important part is:

document.getElementById("word").value

This expression equals the text currently typed into the input box.

Displaying the input on the page
You can combine value with innerHTML to show the user’s text somewhere else.

<input id="word">
<p id="output"></p>
<button onclick="showText()">Show</button>

<script>
function showText(){
  let w = document.getElementById("word").value;
  document.getElementById("output").innerHTML = w;
}
</script>

Troubleshooting
If JavaScript cannot find your input element (the variable is null), review the Finding Elements with getElementById() page.

The original version of this page is human written. This streamlined version was created by ChatGPT with the guidance, editorial scrutiny, and approval of the human creator of this website.