Click on a link will display the specified picture

 1 <ul id="image">
 2         <li><a href="Text_img/1.jpg" title="1">1</a></li>
 3         <li><a href="Text_img/2.jpg" title="2">2</a></li>
 4         <li><a href="Text_img/3.jpg" title="3">3</a></li>
 5         <li><a href="Text_img/4.jpg" title="4">4</a></li>
 6     </ul>
 7     <img src="Text_img/5.jpg" alt="" id="place">
 8     <p id="text">choose picture</p>
 9     <script>
=imagehas11pre () {
function10                      document.getElementById("image");
12             var link=imge.getElementsByTagName("a");
13             for(var i=0;i<link.length;i++){
14                 link[i].onclick=function(){
15                     showPic(this);
16                     console.log(i);     //4
17                     console.log(this);  //选中指定图片
18                     return false;
19                 }
20             }
21         }
22         window.onload=pre;
23     </script>
24 
25     <script>
26         function showPic(Img){
27             var souce=Img.getAttribute("href");
28             var place=document.getElementById("place");
29             place.setAttribute("src",souce);
30             // var li=object.getAttribute("class");
31             // console.log(li);     //显示不出来？？
32             var title=Img.getAttribute("title");
33             var text=document.getElementById("text");
34             text.childNodes[0].nodeValue=title;
35         }

return false when showPic () to return to normal, pre () function to cancel the default behavior onclick event (do not add, a click will jump directly to the new page)

Some of these issues: this point

　　　　　　    li [i] i have been in 4, why this can refer to a specific picture