How to Code JavaScript for More Than One Banner
Web developers can dynamically manipulate Web page elements using JavaScript, as long as each element has a unique ID. The JavaScript document object model (DOM) provides events that uniquely identify the page’s elements, then dynamically alter them in a variety of ways. Alterations include style attributes, functions and locations within the user interface.
Other People Are Reading
Instructions
-
-
1
Open a text editor and create a file named changeBanners.html. Insert basic HTML tags:
<html>
<head></head>
<body></body>
</html> -
2
Add a “<div>” tag between the file’s “<body>” and “</body>” tags. Assign the following style attributes to the "<div>" tag:
<div id="bannerOne" style="border:1px solid;height:30px;width:100px;">
</div>You can alter any of these values to suit your design.
-
-
3
Add a second “<div>” tag with the following attributes:
<div id="bannerTwo" style="border:1px solid;height:50px;width:50px;">
</div> -
4
Add an anchor tag “<a>” after the second "</div>" tag:
<a href="#">Click to Change Banners</a>
-
5
Edit the “<a>” tag to add an “onclick()” event. The event calls a function named “codeBanners” and passes two colors to the function:
<a href="#" onclick=’codeBanners(‘blue’, ‘green’)’>Click to Change Banners</a>
-
6
Add a pair of JavaScript delimiters, “<script>” and “</script>,” between the “<head>” and “</head>” tags. Give the open “<script>” tag the following “type” attribute:
<script type="text/javascript">
</script> -
7
Include a function named “codeBanners” between the JavaScript delimiters:
<html>
<head>
<script type="text/javascript">
function codeBanners(firstColor, secondColor)
{
document.getElementById('bannerOne').style.background = firstColor;
document.getElementById('bannerTwo').style.background = secondColor;
}
</script>
</head>
<body>
<div id="bannerOne" style="border:1px solid;height:30px;width:100px;"></div>
<div id="bannerTwo" style="border:1px solid;height:50px;width:50px;"></div>
<a href="#" onClick="codeBanners('blue','green')">Click to Change Banners</a>
</body>
</html>The "codeBanners" function retrieves the two colors sent using the “onClick()” function. It also references “bannerOne” and changes its color to blue, then references “bannerTwo” and changes its color to green. Save and close the file.
-
8
Open the file in a Web browser. Click the “Click to Change Banners” hyperlink and verify that the banners change color.
-
1
Tips & Warnings
JavaScript can be used to change more than two elements in any given Web page.
JavaScript is not limited to dynamically altering “<div>” tag banners. Virtually any Web page element with a unique ID can be coded to change dynamically.
Some older browsers and browser versions may not implement JavaScript completely.
