网页上按钮更换图片

青年要奋斗

于 2022-02-02 10:35:14 发布

阅读量3.7k

点赞数 5

分类专栏：网页设计

本文链接：https://blog.csdn.net/qq_44962061/article/details/122768185

版权

JavaScript 图片切换按钮事件 flag变量 HTML

关键词由CSDN通过智能技术生成

网页设计专栏收录该内容

1 篇文章

订阅专栏

准备好两张图片

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>