CODEWITHSUNDEEP
javascripthtmlonclicklisteneraddeventlistener
JLeno46
JLeno46

Reputation: 1269

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

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.

Upvotes: 0

Views: 179

Answers (4)

some
some

Reputation: 49612

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>

Upvotes: 1

Twisted Fate
Twisted Fate

Reputation: 145

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.

Upvotes: 0

Coffee bean
Coffee bean

Reputation: 1504

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

Upvotes: 2

Adam Orłowski
Adam Orłowski

Reputation: 4464

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>

Upvotes: 0

Related Questions