原生js实现点击按钮显示/隐藏图片

2023-12-01 分享 932 0

原生js实现点击按钮显示/隐藏图片

想做一个打赏按钮,点击就能显示二维码于是就有了以下的代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示和隐藏图片</title>
</head>
<body>
    <button id="btn" style="margin-left: 230px;">打赏</button>
</br>
    <img style="margin-top: 10px;display: none;" src="https://blogcdn.loliko.cn/pay/wx.png" width="500px" height="500px"> 

    <script>
        // 1.获取事件源
        var btn = document.getElementById("btn");
        var img = document.getElementsByTagName("img")[0];
        // var isShow = true;
        // 2.绑定事件
        btn.onclick = function() {
            // 3. 事件驱动程序
            if(btn.innerHTML === "关闭"){
                img.style.display = "none";
                btn.innerHTML = "打赏";
                // isShow = false;
            } else {
                img.style.display = "block";
                btn.innerHTML = "关闭";
                // isShow = true;
            }
        }
    </script>
</body>
</html>