Dynamic html实现页面上两张图片来回切换

错误的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两张图片之间来回切换</title>
    <script type="text/javascript">
        var switchPicture = function () {
            //获取图片元素
            var oImage = document.getElementById("picture");
            //具体切换方法
            var flag = true;
            if(flag){
                oImage.src = "images/02.jpg";
                flag = false;
            }else{
                oImage.src = "images/01.jpg";
                flag = true;
            }
        }
    </script>
</head>
<body>
    <h3>点击图片可以在两张图片之间相互切换</h3>
    <img src="images/01.jpg" id="picture" onclick="switchPicture()"/>
</body>
</html>

运行上面代码结果：
图片只进行一次切换
原因在于：var flag = true;这行代码所在位置错误。

正确代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两张图片之间来回切换</title>
    <script type="text/javascript">
        var flag = true;
        var switchPicture = function () {
            //获取图片元素
            var oImage = document.getElementById("picture");
            //具体切换方法
            if(flag){
                oImage.src = "images/02.jpg";
                flag = false;
            }else{
                oImage.src = "images/01.jpg";
                flag = true;
            }
        }
    </script>
</head>
<body>
    <h3>点击图片可以在两张图片之间相互切换</h3>
    <img src="images/01.jpg" id="picture" onclick="switchPicture()"/>
</body>
</html>

对照下面的代码，注意二者的细节差别：
需求（触发事件）：点击div，改变div的宽度、高度和背景颜色，再点击一次恢复原状,可以无限次循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV状态切换</title>
    <style type="text/css">
        #div1{
            width: 80px;
            height: 80px;
            background-color: chartreuse;
        }
    </style>
    <script type="text/javascript">
        var flag = false;
        function fn(thisObject) {
            if(!flag){
                thisObject.style.width = "40px";
                thisObject.style.height = "40px";
                thisObject.style.backgroundColor = "red";
                flag = true;
            }else {
                thisObject.style.width = "80px";
                thisObject.style.height = "80px";
                thisObject.style.backgroundColor = "chartreuse";
                flag = false;
            }
        }
    </script>
</head>
<body>
    <div id="div1" onclick="fn(this)"></div>
</body>
</html>

在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_45190226/article/details/121364994