JavaScript: Demo of getElementById( )

/ Chris Nielsen

Here is some JavaScript code that demonstrates how to use JavaScript to change HTML text on a page by clicking a button. When the button is clicked, the text is replaced with a random quote.

This example uses DOM elements innerHTML and document.getElementById(). It also uses a couple of Math functions such as Math.floor() and Math.random(). The button is set up with an “onclick” that calls the JavaScript function. For example:

<button type="button" onclick='returnRandomQuote()'>Get Quote</button>

The returnRandomQuote() function does the following:

1.  Defines a list of quotes.
2. Gets a random index from the list and stores it in randomIndex:

var randomIndex = Math.floor(Math.random() * quotes.length);

3. then uses that randomIndex to load a string from the quotes list:

var randomString = quotes[randomIndex];

4. Finally, the function uses the DOM elements to update the text of the specified id.

document.getElementById("demo").innerHTML = randomString

This corresponds to the id=”demo” in the paragraph tag of the HTML:

<p id="demo">This text will be replaced by a random quote once the button is clicked.</p>

Here is the bare JavaScript:

<script language="JavaScript">
function returnRandomQuote() {
	var quotes = [  "The most technologically efficient machine that man has ever invented is the book.", 
			"Technology is a word that describes something that doesn't work yet.", 
			"We are stuck with technology when what we really want is just stuff that works.", 
			"It's supposed to be automatic, but actually you have to push this button.", 
			"Technological progress has merely provided us with more efficient means for going backwards.", 
			"The human spirit must prevail over technology.", 
			"The great myth of our times is that technology is communication.", 
			"Technology made large populations possible; large populations now make technology indispensable.", 
			"Computers are useless. They can only give you answers.", 
			"Any sufficiently advanced technology is equivalent to magic." ]
	
	var randomIndex = Math.floor(Math.random() * quotes.length);
	var randomString = quotes[randomIndex];
	document.getElementById("demo").innerHTML = randomString
}
</script>

Here is the more complete code that shows the JavaScript code with comments, in the context of the HTML document:

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
  body {
      font-family: 'Roboto', sans-serif;
      font-size: 24px;
  }
</style>
</head>
<body>

  <script language="JavaScript">
  	function returnRandomQuote() {

    	// Create a list of string quotes
    	var quotes = [  "The most technologically efficient machine that man has ever invented is the book.",
                      "Technology is a word that describes something that doesn't work yet.",
                      "We are stuck with technology when what we really want is just stuff that works.",
                      "It's supposed to be automatic, but actually you have to push this button.",
                      "Technological progress has merely provided us with more efficient means for going backwards.",
                      "The human spirit must prevail over technology.",
                      "The great myth of our times is that technology is communication.",
                      "Technology made large populations possible; large populations now make technology indispensable.",
                      "Computers are useless. They can only give you answers.",
                      "Any sufficiently advanced technology is equivalent to magic." ]

        // Use random() to get a random index from the list
        // Math.floor() rounds a float down to its nearest integer
        // Math.random() returns a random number between 0 (inclusive) and 1 (exclusive) 
        var randomIndex = Math.floor(Math.random() * quotes.length);

        // Use randomIndex to get a random string from the list
	var randomString = quotes[randomIndex];

        // innerHTML is a DOM object
        // document.getElementById() is an HTML DOM object.
        document.getElementById("demo").innerHTML = randomString
  	}
  </script>

<h2>Demo of innerHTML change</h2>

<p id="demo">This text will be replaced by a random quote once the button is clicked.</p>

<button type="button" onclick='returnRandomQuote()'>Get Quote</button>

</body>
</html>

For more information about some of the JavaScript features used in this demo, see:
Math.random()
Math.floor()
document.getElementById()
innerHTML

For more examples of what can be done using the document.getElementById() DOM object, such as changing an image, showing new HTML, hiding HTML, or changing CSS styles, see:
JavaScript Introduction

Leave a Reply