This chapter allows the JavaScript code to completely remove the HTML document.
Write a function to associate the operation to the OnClick event. This function:
-Check whether the current browser understands the getElementsByTagName () method;
-Check whether the current browser understands the getElementById () method;
-Constructs a loop to traverse the link
-Set the OnClick event handler function
HTML file:
<H1>Chapter4 Snapshots</H1> <ulID= "Imagegallery"> <Li> <ahref= "Images/4-1.png"title= "Blue-eyed Lori">Picture 1</a> </Li> <Li> <ahref= "Images/4-2.png"title= "Long Hair Lori">Picture 2</a> </Li> <Li> <ahref= "Images/4-3.png"title= "Xiaoxi anime diagram">Picture 3</a> </Li> <Li> <ahref= "Images/4-4.png"title= "Sunspot anime map">Picture 4</a> </Li> </ul> <imgsrc= "Images/4-1.png"ID= "Placeholder"/> <PID= "description">Blue eyed Lori.</P>
JS file:
<script type= "Text/javascript" >
Window.onload=Imggallery;functionshowpic (pic) {varSource = Pic.getattribute ("href"); varplaceholder = document.getElementById ("placeholder"); Placeholder.setattribute ("SRC", source); /*Toggle the display of different text on the same page:*/ varText = Pic.getattribute ("title"); varDescription = document.getElementById ("description"); description.childnodes[0].nodevalue =text;}functionImggallery () {if(!document.getelementsbytagname) { return false;}if(!document.getElementById) { return false;}if(!document.getelementbyid ("Imagegallery")){ return false;//determine if the elements of the id= "imagegallery" exist}varImage = document.getElementById ("Imagegallery");varLinks = image.getelementsbytagname (' A ');//iterate through the various elements in the links array for(vari=0; i<links.length; i++) {Links[i].onclick=function() {Showpic ( This); return false; }}}</script>
In the sixth chapter, the greater the separation between structure and behavior, the better