I want to change 2 images at once

Question

I have images in imageBox1 and imageBox2 and when I click button, is there any way that I can change images in both boxes at the same time? with JS? For instance, I when I click "hello", I want to make image1-1 and image2-1 display together, and when I click "world", they image1-2 and image2-2 should display together.

    <div class = "Button">
        <button type="button">hello</button>
        <button type="button">world</button>
    </div>

    <div class = "imageBox1">
        <img src="image1-1.jpg">
        <img src="image1-2.jpg">
    </div>

    <div class = "imageBox2>
        <img src="image2-1.jpg">
        <img src="image2-2.jpg">
    </div>

Answer 1

It sounds like what you're asking for is a way to show or hide specific images depending on which button the user clicks. If so, you can definitely do this with JavaScript.

Here's a beginner-friendly example using your HTML.

 // set up some variables to make the code easier to read const helloBtn = document.getElementById("hello-button") const worldBtn = document.getElementById("world-button") const img1 = document.getElementById("image1") const img2 = document.getElementById("image2") const img3 = document.getElementById("image3") const img4 = document.getElementById("image4") // When the user clicks the "hello" button, run a function named handleHelloClick helloBtn.addEventListener("click", handleHelloClick); // When the user clicks the "world" button, run a function named handleWorldClick worldBtn.addEventListener("click", handleWorldClick); // this function handles the "hello" click function handleHelloClick() { img1.style.display = "none"; img2.style.display = "block"; img3.style.display = "block"; img4.style.display = "none"; } // this function handles the "world" click function handleWorldClick() { img1.style.display = "block"; img2.style.display = "none"; img3.style.display = "none"; img4.style.display = "block"; }

 <div class="buttons"> <button id="hello-button" type="button">hello</button> <button id="world-button" type="button">world</button> </div> <div class="imageBox1"> <img id="image1" src="https://randomuser.me/api/portraits/women/75.jpg"> <img id="image2" src="https://randomuser.me/api/portraits/men/76.jpg"> </div> <div class="imageBox2"> <img id="image3" src="https://randomuser.me/api/portraits/women/78.jpg"> <img id="image4" src="https://randomuser.me/api/portraits/men/80.jpg"> </div>

Answer 2

first hide them with css then show them when clicking by js

 const hello = document.getElementById("hello") const world = document.getElementById("world") hello.onclick= () => { document.querySelectorAll(".first").forEach(el=> el.style.display = "block") } world.onclick= () => { document.querySelectorAll(".second").forEach(el=> el.style.display = "block") }

 .first, .second { display : none }

 <div class = "Button"> <button id="hello" type="button">hello</button> <button id="world" type="button">world</button> </div> <div class = "imageBox1"> <img class="first" src="https://dummyimage.com/200x100/000/fff&text=first"> <img class="second" src="https://dummyimage.com/200x100/000/fff&text=second"> </div> <div class = "imageBox2"> <img class="first" src="https://dummyimage.com/200x100/000/fff&text=first"> <img class="second" src="https://dummyimage.com/200x100/000/fff&text=second"> </div>

Answer 3

You can add an event listener to each button that gets the index of the button relative to the other buttons, loops through each child in each div and shows the img whose index is the same as the button's.

 const divs = document.querySelectorAll('.image'); const buttons = document.querySelectorAll('button') buttons.forEach((e, i) => e.addEventListener('click', function() { divs.forEach((f) => [...f.children].forEach((g, i1) => g.style.display = i == i1 ? "block" : "none")) }))

 img { display: none; }

 <div class="Button"> <button type="button">hello</button> <button type="button">world</button> </div> <div class="imageBox1 image"> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"> <!-- image1-1.jpg --> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96"> <!-- image1-2.jpg --> </div> <div class="imageBox2 image"> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96"> <!-- image2-1.jpg --> <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"> <!-- image2-2.jpg --> </div>