如何使用Javascript代码通过按钮在两个图像之间切换？

Question

I have an HTML document that has an image, and I want to click a button to toggle between the color version and the black & white version. 我有一个包含图像的HTML文档，我想单击一个按钮在彩色版本和黑白版本之间切换。 My javascript code is as follows is below. 我的JavaScript代码如下。 I realize this question has been answered before, but the answers were unclear. 我知道之前已经回答了这个问题，但是答案不清楚。 Questions: Is the IF condition valid? 问题：IF条件是否有效？ If not, what can I use? 如果没有，我该怎么用？ Can one compare an image.src with an address on my computer as typed below? 可以将image.src与我在计算机上键入的地址进行比较吗？ Note that nothing is changing when I click. 请注意，单击时没有任何变化。 The color image remains. 彩色图像仍然保留。

let colorImage = document.getElementById("colorImage");
let button2 = document.getElementById("button2");

function changeToBW() {

    if (colorImage.src == "Rondout.jpg") {    // I tried three === but that 
                                              // didn't work either.
        colorImage.src = "Rondout(B&W).jpg";
}
    else {
        colorImage.src = "Rondout.jpg";
}
}
 button2.addEventListener("click", changeToBW);

A portion of my HTML code that's within the body below: 我的HTML代码的一部分位于下面的正文中：

<img id = "colorImage" class = "image" src = "Rondout.jpg">
    <button id = "button2" type = "button">Change to B&W</button>

Answer 1

I copied your code to see where the problem is. 我复制了您的代码以查看问题所在。 I used 2 imgs that i just downloaded form google: img1.png and img2.jpeg 我使用了刚刚从Google下载的2张img：img1.png和img2.jpeg

It didn't worked. 它没有用。 So I opened the DevTab of Google Chrome. 因此，我打开了Google Chrome浏览器的DevTab。

So my code: 所以我的代码：

let colorImage = document.getElementById("colorImage");
let button2 = document.getElementById("button2");

function changeToBW() {

    if (colorImage.src == "img1.png") { // colorImage.src = file:///D:/Kokal/Code/JsTests/img1.png

        colorImage.src = "img2.jpeg";
    }
    else {
        colorImage.src = "img1.png";
    }
}

button2.addEventListener("click", changeToBW);

The problem is that colorImage.src holds the absolute path to the file. 问题在于colorImage.src拥有文件的绝对路径。 So you never end-up in the if you aways go in the else . 因此， if您不去else永远不会结束。

Also you want to change the attribute src not the property. 另外，您还想更改属性src而不是属性。 So you need to read the attr too. 因此，您也需要阅读attr。 The way to do it is with the function getAttribute('src') on the colorImage . 做到这一点的方法是使用colorImage上的函数getAttribute('src') 。 After that you will need to set that attr with setAttribute('src', [new value]) 之后，您需要使用setAttribute('src', [new value])设置该属性

If something is not clear chek my code below. 如果不清楚，请在下面填写我的代码。

HTML: HTML：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <img id = "colorImage" class = "image" src = "./img1.png">
    <button id = "button2" type = "button">Change to B&W</button>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

JS: JS：

let colorImage = document.getElementById("colorImage");
let button2 = document.getElementById("button2");

function changeToBW() {

    if (colorImage.getAttribute('src') === "./img1.png") {
        colorImage.setAttribute('src', "./img2.jpg");
    }
    else {
        colorImage.setAttribute('src', "./img1.png");
    }
}

button2.addEventListener("click", changeToBW);

Answer 2

You can use the data attribute to keep track of which image is displayed. 您可以使用data属性来跟踪显示的图像。

In my example, I use the data attribute data-color for this. 在我的示例中，为此使用数据属性data-color 。

Then in the onClick handler, I get the data-color value and toggle between the 0 and 1. The 1 and 0 then correspond with the index in the array images. 然后在onClick处理程序中，获取data-color值并在0和1之间切换。然后1和0对应于数组图像中的索引。 Which is added to the src of colorImage . 将其添加到colorImage的src中。

Here's a working example. 这是一个工作示例。

 let colorImage = document.getElementById("colorImage"); let button2 = document.getElementById("button2"); function changeToBW() { var images = [ "https://images.pexels.com/photos/57905/pexels-photo-57905.jpeg", "https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg" ]; var imageNum = parseInt(colorImage.dataset.color); var nextImg = imageNum === 0 ? 1 : 0; colorImage.src = images[nextImg]; colorImage.dataset.color = nextImg; } button2.addEventListener("click", changeToBW);

 <img id="colorImage" data-color="0" class="image" src="https://images.pexels.com/photos/57905/pexels-photo-57905.jpeg" width="200"> <div><button id="button2" type="button">Change to B&W</button></div>

如何使用Javascript代码通过按钮在两个图像之间切换？

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-08-25 08:34:26

解决方案2
0 2018-08-25 07:57:13

如何使用Javascript代码通过按钮在两个图像之间切换？

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-08-25 08:34:26

解决方案2 0 2018-08-25 07:57:13

解决方案1
2 已采纳 2018-08-25 08:34:26

解决方案2
0 2018-08-25 07:57:13