js tutorial series 35: javascript-DOM: click button to switch pictures

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>


<a href="http://www.baidu.com" id="link">点击切换</a>
<br>

<img id="img" src="images/a.jpg" alt="图片" width="500" height="350">

</body>
</html>
<script>
  // Requirements: Click a, change the picture 
  //   Click the a element, modify the src of img 
  // // 1. Get the element 
  var link = document.getElementById('link' );
   var img = document.getElementById('img' ) ;
   var flag = true ; // Used to mark the picture currently displayed 
  // 2. Register a click event for a 
      link.onclick = function (){
         //     3. Modify the src attribute of img in the event handler Value 
        // 4. When clicking a, first judge the value of flag, if it is true, modify it to b.jpg. Otherwise, it is a.jpg 
        if (flag){
           // From a to b 
          img.src = 'images /b.jpg' ;
          flag = false;
        } else {
           // From b to a 
          img.src = 'images/a.jpg' ;
          flag = true;
        }
        return  false ; // prevent the default behavior of a 
      }
  
</script>

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325812024&siteId=291194637