CODEWITHSUNDEEP
javascripthtml
Eirik Vattøy
Eirik Vattøy

Reputation: 175

Changing image when clicking on button

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 ````

Upvotes: 0

Views: 85

Answers (4)

danny.hu
danny.hu

Reputation: 110

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

Upvotes: 0

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 642

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>

Upvotes: 1

MicFin
MicFin

Reputation: 2501

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");
  }
}
  1. Select the button by its id.
  2. Use === when comparing, not =.
  3. Use getAttribute() and setAttribute() to manipulate src value.

Read more here:

Upvotes: 0

Kirill Simonov
Kirill Simonov

Reputation: 8481

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>

Upvotes: 1

Related Questions