做两个按钮,单机该按钮时显示该按钮的图片js
时间: 2024-05-04 21:17:55 浏览: 77
好的,以下是简单的实现方法:
HTML代码:
```html
<button id="btn1" onclick="showImage('btn1')">按钮1</button>
<button id="btn2" onclick="showImage('btn2')">按钮2</button>
<div id="image-container"></div>
```
JS代码:
```javascript
function showImage(btnId) {
var imgContainer = document.getElementById("image-container");
imgContainer.innerHTML = ""; // 清空容器
var img = document.createElement("img"); // 创建img元素
img.src = btnId + ".png"; // 图片路径
imgContainer.appendChild(img); // 将img添加到容器中
}
```
上述代码会在点击按钮时,将按钮对应的图片显示在 `image-container` 的 `div` 元素中。需要注意的是,图片的路径应该根据实际情况进行修改。
相关问题
两个按钮实现删除图片和替换图片的js
代码应该怎么写?
对于您的问题,我可以给您一些指导。对于删除图片,您可以使用以下代码:
```
function deleteImage() {
var image = document.getElementById("image");
image.parentNode.removeChild(image);
}
```
其中,"image"是您要删除的图片的ID。
对于替换图片,您可以使用以下代码:
```
function replaceImage() {
var image = document.getElementById("image");
image.src = "new_image.jpg";
}
```
其中,"image"是您要替换的图片的ID,"new_image.jpg"是您要替换成的新图片的文件名。
希望这些代码可以帮助到您!如果您有任何其他问题,请随时问我。
js一个按钮来回切换两张图片
以下是一个简单的HTML和JavaScript代码,实现一个按钮来回切换两张图片:
```html
<!DOCTYPE html>
<html>
<head>
<title>Toggle Images</title>
<style>
img {
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<img id="image1" src="image1.jpg">
<img id="image2" src="image2.jpg">
<button onclick="toggleImages()">Toggle Images</button>
<script>
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
function toggleImages() {
if (image1.style.display == "none") {
image1.style.display = "block";
image2.style.display = "none";
} else {
image1.style.display = "none";
image2.style.display = "block";
}
}
</script>
</body>
</html>
```
在上面的代码中,我们有两张图片和一个按钮。我们使用JavaScript来切换这两张图片。我们首先获取这两张图片的引用,并将它们存储在变量`image1`和`image2`中。然后,我们定义一个名为`toggleImages()`的函数,该函数在单击按钮时被调用。在函数中,我们检查`image1`的`display`属性是否为`none`。如果是,我们将`image1`显示出来,并将`image2`隐藏。否则,我们将`image1`隐藏,并将`image2`显示出来。
我们在按钮上使用`onclick`属性将`toggleImages()`函数与按钮关联起来。当我们单击按钮时,`toggleImages()`函数将切换两张图片的显示。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)