Function doesn't work when called with addEventListener or onclick, doesn't show up any error msg

Question

I wrote an easy function that should swap between 2 images, this function should fires when clicking on a button but nothing happens on click.

I've tried both addEventListener and onclick method but none in working.

<img id="avatar" src="dog1.jpg" alt="avatar">
<button id="button">change dog</button>

    function changeDog() {
      var dog = document.getElementById('avatar').scr;
      if (dog == "dog1.jpg" ) {
        document.getElementById('avatar').scr = "dog2.jpg";
      }
      else {
        document.getElementById('avatar').src = "dog1.jpg";
      }
    }

    var button = document.getElementById('button');
    button.addEventListener=('click', changeDog);

I expect that clicking on the button the image with id='avatar' will change source from "dog1.jpg" to "dog2.jpg" and viceversa, but absolutely nothing happens. No error msg is showed. I suspect it may be a dumb mistake cause I'm unexperienced, but I'm struck on this. Thank you all for any help.

Answer 1

You have a few typos in your code. See below

 function changeDog() { var dog = document.getElementById('avatar'); if (dog.src === "dog1.jpg" ) { dog.src = "dog2.jpg"; } else { dog.src = "dog1.jpg"; } } var button = document.getElementById('button'); button.addEventListener('click', changeDog); 

 <img id="avatar" src="dog1.jpg" alt="avatar"> <button id="button">change dog</button> 

Also you should decide reading about comparision (using === instead of ==): https://www.w3schools.com/js/js_comparisons.asp

Answer 2

There are multiple errors in your code. For example, you have written src on some places, and scr on other. Also, you repeat the part of the code again and again.

 // Array with all dogs. Makes it easier to add more dogs. const dogs = [ "dog1.jpg", "dog2.jpg" ]; function changeDog() { // Get the avatar element const avatar = document.getElementById('avatar'); // Get current name. Note that the broswer probably have added // the full url to the image. I use split to break up the string // in an array, and then use slice(-1) to get the last item // and then [0] to get the element. const dog = avatar.src.split('/').slice(-1)[0]; // get the index of the dog const index = dogs.indexOf( dog ); // set the new src, from the dogs array, with the index + 1; // If index + 1 is larger than the length of the dogs-array // the % (remainder-operator) will make sure that the index // wraps around to 0, so we get the next name. avatar.src = dogs[ ( index + 1 ) % dogs.length ]; console.log( avatar.src ); } var button = document.getElementById('button'); button.addEventListener('click', changeDog); 

 <img id="avatar" src="dog1.jpg" alt="avatar"> <button id="button">change dog</button> 

Answer 3

function changeDog() {
  // you create a constant for document.getElementById().src, so do not need it every line
  const dog = document.getElementById('avatar').src;
  if (dog === "dog1.jpg" ) {
    dog = "dog2.jpg";
  }
  else {
    dog = "dog1.jpg";
  }
}    

const button= document.getElementById("button");
button.addEventListener("click", () => {
    changeDog();
}

Updated from var to let/const (new standard), changed your rough equate to an absolute and created a direct call toward the event listener, the call method I have used allows you to perform additional actions after changeDog() also if you so wish. Your original code had a few issues which prevented it from actually running.

Answer 4

function changeDog() {
  const dog = document.getElementById('avatar');

  const imgSrc = dog.src === "dog1.jpg" ? "dog2.jpg" : dog.src;
  dog.src = imgSrc;
}

 const button = document.getElementById('button');
 button.addEventListener('click', changeDog);

<img id="avatar" src="dog1.jpg" alt="avatar">
<button id="button">change dog</button>