Changing image when clicking on button

Question

Why won't the code work?

<body>
    <img src="wolfs.jpeg" alt="lol" id="change">
    <button id="button">click to change picture</button>
</body>

Spent a long time dwelling in this

img.addEventListener("click", changeNow);

function changeNow() {
  var img = document.getElementById("change"); 
  if (img.src = "../img/backpack.jpeg") {    
    img.src = "../img/back.jpeg";
  } else {
    img.src = "../img/backpack.jpeg";
  }
}

```javascript

lol ````

Answer 1

You just made a typo in your if statement: if (img.src = "../img/backpack.jpeg") , you need === instead of =

 let img = document.getElementById('change'); let button = document.getElementById('button'); button.addEventListener("click", changeNow); function changeNow() { var img = document.getElementById("change"); if (img.src === "https://i.pinimg.com/736x/db/63/32/db633275b729187b04859bbca38eb156--yellow-backpack-yellow-outfits.jpg") { img.src = "http://www.spiritanimal.info/wp-content/uploads/Wolf-Spirit-Animal-2.jpg"; } else { img.src = "https://i.pinimg.com/736x/db/63/32/db633275b729187b04859bbca38eb156--yellow-backpack-yellow-outfits.jpg"; } }

 <body> <img src="http://www.spiritanimal.info/wp-content/uploads/Wolf-Spirit-Animal-2.jpg" alt="lol" id="change" style="height: 200px; width: 200px"> <button id="button">click to change picture</button> </body>

Answer 2

 var img1 = 'https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg'; var img2 = 'https://c1.staticflickr.com/2/1018/805106121_ab84d1a216_b.jpg'; var changePicture = document.getElementById('change_picture'); changePicture.addEventListener("click", changeNow); function changeNow() { var img = document.getElementById("image"); if (img.src == img1) { img.src = img2; }else{ img.src = img1; } }

 img{ width: 100px; height: 100px; }

 <body> <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" alt="lol" id="image"> <button id="change_picture">click to change picture</button> </body>

Answer 3

document.getElementById('button').addEventListener("click", changeNow);

function changeNow() {
  var img = document.getElementById("change"); 
  if (img.getAttribute("src") === "../img/backpack.jpeg") {    
    img.setAttribute("src", "../img/back.jpeg");
  } else {
    img.setAttribute("src", "../img/backpack.jpeg");
  }
}

Select the button by its id .
Use === when comparing, not = .
Use getAttribute() and setAttribute() to manipulate src value.

Read more here:

Answer 4

like this:

function changeNow() {
    var img = document.getElementById('change');
    var toggled = img.getAttribute('data-toggled');
    var imgURI = '../img/backpack.jpeg';

    if(toggled === '1') {
        imgURI = '../img/back.jpeg';
        toggled = '0';
    } else {
        imgURI = '../img/backpack.jpeg';
        toggled = '1';
    }

    img.src = imgURI;
    img.setAttribute('data-toggled', toggled);
}

Changing image when clicking on button

Question

4 answers

solution1
1 2018-01-25 01:32:03

solution2
1 2018-01-25 01:59:20

solution3
0 ACCPTED 2018-01-25 01:28:39

solution4
0 2018-01-25 03:29:57

Changing image when clicking on button

Question

4 answers

solution1 1 2018-01-25 01:32:03

solution2 1 2018-01-25 01:59:20

solution3 0 ACCPTED 2018-01-25 01:28:39

solution4 0 2018-01-25 03:29:57

solution1
1 2018-01-25 01:32:03

solution2
1 2018-01-25 01:59:20

solution3
0 ACCPTED 2018-01-25 01:28:39

solution4
0 2018-01-25 03:29:57