Mastering JavaScript Output Techniques with innerHTML Command
Learn how to effectively output information on a web page using JavaScript's innerHTML command and how to utilize an empty section as a placeholder for dynamic content. Say goodbye to the limitations of the alert() function and embrace a more versatile approach to displaying content on websites.
Uploaded on | 0 Views
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
JavaScript Adios alert() Using innerHTML Using an empty section
Learning Objectives By the end of this lecture, you should be able to: Learn a much better technique than alert() to output information to a web page using JavaScript's innerHTML command. Learn how to use a blank section as a placeholder for information you wish to output
Bye-bye alert() It is time to say goodbye to an old friend. Though the alert() function has served us well, it should not typically be used in the real world . At the very least, alert() should be reserved for only a few particular situations. Some limitations of alert() include but are not limited to: The alert box can not display HTML markup. The alert box can not display images. The alert box disappears (along with any information inside) when the user clicks the OK button. The user must click 'OK' in order to make the alert box disappear. Information in an existing alert box can not be modified. Therefore, we are going to pretty much retire alert boxes, we are now going to learn how to use a different JavaScript command to output content directly into an existing web page.
Outputting using innerHTML The following JavaScript code will output the words: Look at me! (in <h1> markup) into a section on the page that has a tag called 'output': var someText = "<h1>Hello World!</h1>"; document.getElementById("output").innerHTML = someText; This innerHTML command is extremely helpful and widely used. However it is very important to note that the innerHTML command replaces anything and everything that was in that section before. So in this case, the above command would replace everything that was previously inside 'output' with the words 'Hello World!' (in <h1> markup). Imagine if that output section contained a whole bunch of important information that was there earlier. If you then issued the innerHTML command, all of that existing content would be replaced with the words "Hello World!". This is clearly not a desirable result. Fortunately, there is an easy fix .
Creating an empty section We will create an empty section in our document whose only job in life is to hold the output of the innerHTML command: <div id="results"> </div> The following JavaScript code will output the words: Look at me! in <h1> markup into our "results" div section: var someText = "<h1>Look at me!</h1>"; document.getElementById("results").innerHTML = someText; 1. The first line of code simply creates a variable that holds a string containing the text we want to insert into our <div> section. The second line inserts the string from the variable 'someText' into that 'results' div section. 2.
Creating an empty <div> section Suppose that we are writing a conversion function of some kind (e.g. convert pounds to kilograms), and we want to output the information into our HTML document. I will start by creating an empty div section like so: <div id="conversionResults"> </div> Again, at the moment, this <div> section is essentially invisible on our page since there is nothing inside it. Instead of using the alert()function to output results like we've been doing up to this point: alert(kilograms); we will instead use innerHTML like so: document.getElementById("conversionResults").innerHTML = kilograms;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Conversions with innerHTML</title> <script type="text/javascript"> function convertKilos() { var pounds = document.getElementById("txtPounds").value; pounds = parseFloat(pounds); var kilos = pounds*2.28; var output = pounds + " pounds equals " + kilos + " kilograms."; document.getElementById("conversionResults").innerHTML = output; } </script> </head> <body> Enter an amount in pounds: <input type="text" id="txtPounds"> <input type="button" value="Convert to kilograms" onclick="convertKilos()" ><p> <div id="conversionResults"> </div> </body> </html>
The steps Here are the steps as I would recommend doing them: Begin by creating an empty <div> section in which you will later output your information. Name this section whatever you like. I use an identifier for the div that indicates what is going inside. For example: 'conversionResults' or 'greetingOutput'. Create a variable to hold the content you wish to output. Place your entire string inside that variable. You may find yourself doing a certain amount of concatenation here. Output that variable into the div section using JavaScript's innerHTML command. 1. 2. 3. FILE: inner_html_greeting.htm
Bug alert!! Recall that the innerHTML command replaces any content that was inside that section before. Suppose that we want to greet the user and print the date. What do you think will happen here? var greeting = "Hello, how are you?" var todaysDate = "Today is " + Date(); document.getElementById("output").innerHTML = greeting; document.getElementById("output").innerHTML = todaysDate; Answer: The second innerHTML command will replace whatever was previously inside the "output" div. Since the second innerHTML command is executed by JavaScript essentially instantly after the first innerHTML command, the visitor to our page will never see the first line (the greeting). (This would make for a good exam question )
Concatenation redux Can you fix this code so that both strings get output into the 'output' div? var greeting = "Hello, how are you?" var todaysDate = "Today is " + Date(); document.getElementById("output").innerHTML = greeting; document.getElementById("output").innerHTML = todaysDate; Answer: var greeting = "Hello, how are you?" + "<br>Today is " + Date() + ". <br>I hope you have a nice day."; document.getElementById("output").innerHTML = greeting; FILE: inner_html_greeting_concatenated.htm
Another example FILE: innerHTML_conversions.htm
