CODEWITHSUNDEEP
javascripthtmlbuttontoggleaddeventlistener
ACF
ACF

Reputation: 93

How to toggle between two images with a button using Javascript code?

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. My javascript code is as follows is below. I realize this question has been answered before, but the answers were unclear. Questions: Is the IF condition valid? If not, what can I use? Can one compare an image.src with an address on my computer as typed below? 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:

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

Upvotes: 1

Views: 6611

Answers (4)

Tutor GRRR
Tutor GRRR

Reputation: 1

You could also use the following code after creating html and css files to switch between two pictures and adding two buttons:

const image = document.getElementById("image");
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");

btn1.addEventListener("click", () => {
    image.src = "image1.jpg";
});

btn2.addEventListener("click", () => {
    image.src = "image2.jpg";
});

Upvotes: 0

Kaylan
Kaylan

Reputation: 1

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

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

let imgFlag = 1;

function changeToBW() {

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

button2.addEventListener("toggle", changeToBW);

Upvotes: 0

Kaloian Kunov
Kaloian Kunov

Reputation: 168

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

It didn't worked. So I opened the DevTab of Google Chrome.

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. So you never end-up in the if you aways go in the else.

Also you want to change the attribute src not the property. So you need to read the attr too. The way to do it is with the function getAttribute('src') on the colorImage. After that you will need to set that attr with setAttribute('src', [new value])

If something is not clear chek my code below.

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:

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);

Upvotes: 2

Roy Scheffers
Roy Scheffers

Reputation: 3908

You can use the data attribute to keep track of which image is displayed.

In my example, I use the data attribute data-color for this.

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. Which is added to the src of colorImage.

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>

Upvotes: 0

Related Questions