JS实现点击按钮更换图片
时间: 2023-09-15 20:17:28 浏览: 57
可以使用以下 JavaScript 代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>更换图片</title>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("pic1")) {
image.src = "pic2.jpg";
} else {
image.src = "pic1.jpg";
}
}
</script>
</head>
<body>
<img id="myImage" src="pic1.jpg" width="200" height="200">
<br>
<button onclick="changeImage()">更换图片</button>
</body>
</html>
```
其中,`changeImage()` 函数用于更换图片。首先,通过 `document.getElementById()` 方法获取到 `id` 为 `myImage` 的图片元素;然后,通过 `image.src.match()` 方法来判断当前显示的图片是否为 `pic1.jpg`,如果是,则更换为 `pic2.jpg`,否则更换为 `pic1.jpg`。最后,更新图片的 `src` 属性,显示更换后的图片。在 HTML 中,通过 `<button>` 标签来创建一个按钮,并将 `onclick` 事件绑定到 `changeImage()` 函数上,当用户点击按钮时,就会触发 `changeImage()` 函数。