JavaScript
Adiosalert()UsinginnerHTMLUsing an empty section
Learning Objectives
By the end of this lecture, you should be able to:Learn amuchbetter technique thanalert()to output information to a web pageLearn how to use a blank section as a placeholder for information you wish to output
Bye-byealert()
It is time to say goodbye to an old friend. Though thealert()function has served us well, it shouldnottypically be used in the “real world”. At the very least,alert()should be reserved for only a few particular situations.Some limitations ofalert()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 usinginnerHTML
The following JavaScript code will output the words:Look at me!(in<h1>markup) into a section on the page that has a ID named'output':var someText = "<h1>Hello World!</h1>";document.getElementById("output").innerHTML = someText;ThisinnerHTMLcommand is extremely helpful and widely used.IMPORTANT:It is very important to note that theinnerHTMLcommandreplaces everythingthat was in that section before. So in this case, the above command would replace everything that was previously inside 'output' with the wordsHello World!.Imagine if thatoutputsection 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 are various easy fixes. We will discuss one option next.
Creating an empty section
We will place anemptysection in our document. The one and only job of this section is to hold the output of theinnerHTMLcommand:<div id="results"></div>The following JavaScript code will output the words:Look at me!in<h1>markup into ourresultsdiv section:var someText = "<h1>Look at me!</h1>";document.getElementById("results").innerHTML = someText;The first line of code simply creates a variable that holds a string containing the content we want to insert into our web document.The second line inserts the string into the 'results' section.
Restated: 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 anemptysection like so:<div id="conversionResults"></div>NOTE: When the page first loads, this<div>section isinvisiblesince there is nothing inside of it.Instead of using thealert()function to output results like we've been doing up to this point:alert(kilograms);we willfrom this point forwarduseinnerHTMLlike so:document.getElementById("conversionResults").innerHTML = kilograms;
The steps
Here are the steps as I would recommend doing them:Begin by creating an empty<div>section (or a semantic section if there is one that "fits") in which you will later output your information. Give an identifier to this section using theidattribute. Obviously, you should choose an identifier that gives some idea of what is supposed to be 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 (i.e. joining strings together) here.Output that variable into the section using JavaScript'sinnerHTMLcommand.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Greeting with innerHTML</title></head><body><h1>innerHTML Example</h1><p>What is your name?<input type="text" id="txtName"><p><input type="button" value="Say Hello to Me!" onclick="greetUser()" ><div id="greetingOutput"></div> <!-- end of greetingOutput div --><script>function greetUser(){var userName=document.getElementById("txtName").value;var greeting = "Hello, " + userName;//Recall that you can join 2 strings together with the + operatordocument.getElementById("greetingOutput").innerHTML = greeting;}</script></body></html>
innerHTML_greeting.html
Bug alert!!
Recall that theinnerHTMLcommandreplacesany content that was inside that section before.Suppose that we want to greet the user and print the date. Here is some code:var greeting = "Hello, how are you?"var todaysDate = "Today is " + Date();document.getElementById("output").innerHTML = greeting;document.getElementById("output").innerHTML = todaysDate;What do you predict will happen?Answer: The second innerHTML command willreplacewhatever was previously inside theoutputsection. Since the secondinnerHTMLcommand is executed by JavaScript essentially instantly after the firstinnerHTMLcommand, the visitor to our page will never see the first line (the greeting).(This would make for a good exam question…)
0
Embed
Upload