Question 209911 in Html Question posted in
Some basic documentation can be found here.

Html – how can i add another image to this function?

so this function is basically when i click on myBtn the img change to another img, i made that but how can i add another img i wanna change and change both the imgs when i click, can anyone help

const myBtn = document.getElementById("darktheme");
const img = document.getElementById("ferrarijs")


let mySrc = img.getAttribute("src");
let counter = 0;

myBtn.addEventListener("click", function() {
  if (counter % 2 === 0) {
    img.setAttribute("src", "images/ferrari.jpg");
  } else {
    img.setAttribute("src", "images/ferrariwhte.jpg");
  }
  
  counter++;
});
Tags:

3

Answers


  1. 0

    It’s pretty easy. That’s just copy & paste & you’re done.

    const myBtn = document.getElementById("darktheme");
const img = document.getElementById("ferrarijs")
const img2 = document.getElementById("teslajs")


let mySrc = img.getAttribute("src");
let counter = 0;

myBtn.addEventListener("click", function() {
  if (counter % 2 === 0) {
    img.setAttribute("src", "images/ferrari.jpg");
  } else {
    img.setAttribute("src", "images/ferrariwhte.jpg");
  }
  if (counter % 2 === 0) {
    img2.setAttribute("src", "images/tesla.jpg");
  } else {
    img2.setAttribute("src", "images/teslawhte.jpg");
  }
  
  counter++;
});

    This will toggle the src of <img src="teslawhite.jpg" src="teslajs"> between tesla & teslawhite. I know "Tesla" is a pretty dumb example. Feel free to change it with what you want.

    Login or Signup to reply.
  2. 0

    You can use querySelectorAll to find all <img>‘s.

    Then loop over those to set the src.

    Use an array to get the next image src, check if the current index matches length - 1, if so, start again at index 0

    const srcs = [
  'https://placehold.co/150?text=Image-0',
  'https://placehold.co/150?text=Image-1',
  'https://placehold.co/150?text=Image-2',
  'https://placehold.co/150?text=Image-3'
];

const myBtn = document.getElementById("darktheme");
const imgs = [ ...document.querySelectorAll("img") ];

myBtn.addEventListener("click", function() {
    imgs.forEach(i => {
        let oldIndex = srcs.findIndex(e => e === i.src);
        let newIndex = (oldIndex === srcs.length - 1) ? 0 : oldIndex + 1;
        i.src = srcs[newIndex];
    });
});
    <button id='darktheme'>Click me!</button>

<img src='https://placehold.co/150?text=Image-0' />
<img src='https://placehold.co/150?text=Image-0' />
    Login or Signup to reply.
  3. 0

    You will need to compute the next index by using the length of an image URL array.

    const images = [
  'http://placekitten.com/200/300',
  'http://placekitten.com/300/300',
  'http://placekitten.com/300/200',
];

const myBtn = document.getElementById('darktheme');
const img = document.getElementById('ferrarijs')
let counter = 0;

myBtn.addEventListener('click', function() {
  counter = (counter + 1) % images.length;
  img.src = images[counter];
});
    body { display: flex; align-items: flex-start; justify-content: center; }
    <img id="ferrarijs" src="http://placekitten.com/200/300" />
<button id="darktheme">Next</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search