简单事件:点击按钮,切换图片

930 阅读1分钟

效果描述:点击按钮,切换图片

1.png

2.png

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>切换图片</title>
</head>	
<body>
	<button id="btn">点我</button>
	<br>
	<img id="mv" width="400" height="300" src="images/a.jpg" alt="">

	 <script>
    //1.获取元素
    var btn = document.getElementById('btn');
    var mv = document.getElementById('mv');
    //2.给元素注册事件
    var flag = 1;
    btn.onclick = function () {
      if (flag === 1) {
        mv.src = 'images/b.jpg';
        flag = 2;
      } else if (flag === 2) {
        mv.src = 'images/a.jpg';
        flag = 1;
      }
    }

  </script>
</body>
</html>

过程报错:

Uncaught TypeError: document.getElementsById is not a function at 01%E5%88%87%E6%8D%A2%E5%9B%BE%E7%89%87.html:15

原因:细节错误getElementById,不是getElementsById