首页 > 其他分享> > 网页上按钮更换图片

网页上按钮更换图片

2022-02-02 10:59:12 作者：互联网

准备好两张图片

media/1.png

media/2.png

摆好图片布局和按钮

<input id="btn" type="button" value="修改" /><br/>
<img id="pic" src="img/1.png"/>

window.onload = function (): 表示浏览器把整个页面解析完了再去解析{}内部的代码。

var oBtn = document.getElementById("btn");
var oPic = document.getElementById("pic");
var flag = true;

getElementById的含义是从id中获取元素，从html中body标签里获取的，flag默认情况为true

写一个按钮发生事件

oBtn.onclick = function () {
	flag = false;
	oBtn.value="已修改";
    if (!flag) {
        oPic.src = "img/2.png";
    }
};

完整的代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oPic = document.getElementById("pic");
            var flag = true;

            oBtn.onclick = function () {
				flag = false;
				oBtn.value="已修改";
                if (!flag) {
                    oPic.src = "img/2.png";
                    
                }
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="修改" /><br/>
    <img id="pic" src="img/1.png"/>
</body>
</html>

但是，如果要反复点击按钮可以实现图片来换，怎么办？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oPic = document.getElementById("pic");
            var flag = true;

            oBtn.onclick = function () {
                if (flag) {
                    oPic.src = "img/1.png";
                    flag = false;
                } else {
                    oPic.src = "img/2.png";
                    flag = true;
                }
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="修改" /><br/>
    <img id="pic" src="img/1.png"/>
</body>
</html>

从结果上可以看到，第一次切换图片需要按钮两次，但是，有小小的瑕疵怎么解决？

实际上呢，我们似乎忽略了最关键的flag标志，因为默认的情况下img/1.png显示，flag为真，单击按钮还是img/1.png，所以说，按钮事件发生，图片换掉即可，或者if圆括号里flag改成!flag，还可以写flag默认为false。目前有三种方法……

标签：oBtn,网页,getElementById,flag,按钮,var,更换,oPic,png
来源： https://blog.csdn.net/qq_44962061/article/details/122768185