onClick change src images

Question

I'm trying to do this shema with JavaScript, when I click on the Switch button, it changes the car (.png) and the text content related to the car inside the sidebar (car specs), I have four cars. (I'm a front-end junior dev, and still figure out how to manage this),

If you can give me few clues, it will help a lot !

thank you

my code HTML looks like this for the button :

<div class="btn" onclick="changeCar()"> <img id="img-id" src="/src/asset/img/pixel-yellow-car.png" alt=""> <span>SWITCH</span> </div>

---

hero section :

<div class="hero_car">
                        <div class=""><img id="hero-car-src" src="/src/asset/img/pixel-purple-car.png" alt=""></div>
                    </div>

car specs code :

<aside class="car-specs" id="img">
                    <div id="purple-car-specs">
                        <div class="div">
                            <span>
                                POWER
                                <br>
                                425
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                WEIGHT
                                <br>
                                4,140
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                GRIP
                                <br>
                                135
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                SHIFT SPEED
                                <br>
                                0.350s
                            </span>
                        </div>
                    </div>
                    <div id="blue-car-specs">
                        <div class="div">
                            <span>
                                POWER
                                <br>
                                425
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                WEIGHT
                                <br>
                                4,140
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                GRIP
                                <br>
                                135
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                SHIFT SPEED
                                <br>
                                0.350s
                            </span>
                        </div>
                    </div>
                    <div id="green-car-specs">
                        <div class="div">
                            <span>
                                POWER
                                <br>
                                425
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                WEIGHT
                                <br>
                                4,140
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                GRIP
                                <br>
                                135
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                SHIFT SPEED
                                <br>
                                0.350s
                            </span>
                        </div>
                    </div>
                    <div id="yellow-car-specs">
                        <div class="div">
                            <span>
                                POWER
                                <br>
                                425
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                WEIGHT
                                <br>
                                4,140
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                GRIP
                                <br>
                                135
                            </span>
                        </div>
                        <div class="div">
                            <span>
                                SHIFT SPEED
                                <br>
                                0.350s
                            </span>
                        </div>
                    </div>
                </aside>

Edit : Thanks to Devielu the onclick function is working with few tweaks, I'm now thinking about how to connect those car-specs to the right imgs.

Answer 1

You need to define an ID on your image element. Something like this:

<img id="img-id" src="" onclick="changeCar()" />

Then you can create an array with your images path and an index to know which image is selected.

var index = 0;
const images = ["img1.png", "img2.png", "img3.png"];

After that you create your function changeCar that will update the image and increment the index. If the index equals to images.length, then will reset index to 0:

function changeCar() {
  document.getElementById("img-id").src = images[index];
  index += 1;              
  if (index == images.length) {
    index = 0;
  }
}

Try to apply something like this and give your feedback.