原生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>