HTML and CSS Reference
In-Depth Information
To display the contents of a variable as part of a text string, JavaScript can concatenate
text and variables to create a seamless string of characters.
Concatenate
means to join or
link together. The symbol for concatenation is the plus sign (+).
To Display Text and Variable Values to a Web Page Using innerHTML
Table 9-19 shows the code to write a simple welcome message that concatenates text with the values stored in
several variables. In line 23, the innerHTML property is used to place data directly into a Web page in the <p> tag
container. The text message string encloses the HTML tag in quotation marks within the text message string. The
plus sign (+) concatenates the three variables weekDay, monthDate, and year together, along with the text message
and variable daysToBridalExpo. Placement of quotation marks is important and you must include closing HTML
tags. Line 24 is the closing brace for the countDown() user-defined function.
Table 9-19 Code to Write a Message to the Web Page
Line
Code
23
displayCountDown.innerHTML = “<p style='font-size:12pt; font-
family:helvetica;'>Today is “+weekDay+” “+monthDate+” “+year+”. We have
“+daysToBridalExpo+” days until the Midwest Bridal Expo.</p>”
24
}
The following step displays text and variables using the innerHTML property.
1
•
necessary.
Click line 23, if
•
code shown in
Table 9-19 to create
the message text
with the stored val-
ues. Press the
e n t e r
key only at the end
of each complete
line of code.
Enter the JavaScript
brace to close the
JavaScript user-
deined function
JavaScript code to
construct and display
dynamic message
insertion point after
pressing ENTER key twice
•
Press the
e n t e r
key
once more after the
last } on line 24 to
leave a blank line between user-defined functions (Figure 9-7).
Can the innerHTML property be used for anything else?
The innerHTML property can retrieve the contents of any tag that has an id attribute. The
id attribute values must be unique for each tag.
Figure 9-7
How does JavaScript know to concatenate instead of add when it sees the plus sign (+)?
When the JavaScript interpreter identifies the values surrounding a plus sign (+) and they
are not numeric values, it will attempt to join them together.
