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

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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
0
+
网站访问量
;
});

<!-- language: lang-css -->

body { display: flex; align-items: flex-start; justify-content: center; }

<!-- language: lang-html -->

<img id="ferrarijs" src="http://placekitten.com/200/300" />
<button id="darktheme">Next</button>

<!-- end snippet -->

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.

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-html -->

<button id='darktheme'>Click me!</button>

<img src='https://placehold.co/150?text=Image-0' />
<img src='https://placehold.co/150?text=Image-0' />

<!-- end snippet -->