Hide and Display Text with DHTML

You can use innerHTML to dynamically hide and display text.

Syntax

Here, {ID of element} is the ID of an HTML element and {content} is the new content to go into the element.

Basic Example

This code includes two functions and two buttons. Each function displays a different message and each button triggers a different function.

In the functions, the getElementById refers to the HTML element by using its ID. We give the HTML element an ID of "myText" using id="myText".

So in the first function for example, you can see that document.getElementById('myText').innerHTML = 'Thanks!'; is setting the innerHTML of the "myText" element to "Thanks!".

<script type="text/javascript">
function Msg1(){
  document.getElementById('myText').innerHTML = 'Thanks!';
}
function Msg2(){
  document.getElementById('myText').innerHTML = 'Try message 1 again...';
}
</script>
<input type="button" onclick="Msg1()" value="Show Message 1">
<input type="button"  onclick="Msg2()" value="Show Message 2">
<p id="myText"></p>

Example With User Input

Here's an example of using innerHTML with a text field. Here, we display whatever the user has entered into the input field.

<script type="text/javascript">
function showMsg(){
  var userInput = document.getElementById('userInput').value;
  document.getElementById('userMsg').innerHTML = userInput;
}
</script>
<input type="input" maxlength="40" id="userInput" onkeyup="showMsg()" placeholder="Enter text here...">
<p id="userMsg"></p>