I need to swap out a pair of images simultaneously

Question

I need to swap out a pair of images simultaneously

Is it possible to use JavaScript to change the images in imageBox1 and imageBox2 simultaneously when clicking a button? For example, if I click "hello", I want image1-1 and image2-1 to be displayed together. And if I click "world", then image1-2 and image2-2 should display at the same time.

    <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>

javascript

Answer 1

Answer №1

To create a dynamic button event listener that shows corresponding images in each div, you can loop through the buttons and images. When a button is clicked, only the image with the same index as the button will be displayed.

const divs = document.querySelectorAll('.image');

const buttons = document.querySelectorAll('button')

buttons.forEach((button, index) => {
  button.addEventListener('click', function() {
    divs.forEach((div) => {
      [...div.children].forEach((img, imgIndex) => {
        img.style.display = (index === imgIndex) ? "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>

Answer 2

To create a dynamic button event listener that shows corresponding images in each div, you can loop through the buttons and images. When a button is clicked, only the image with the same index as the button will be displayed.

const divs = document.querySelectorAll('.image');

const buttons = document.querySelectorAll('button')

buttons.forEach((button, index) => {
  button.addEventListener('click', function() {
    divs.forEach((div) => {
      [...div.children].forEach((img, imgIndex) => {
        img.style.display = (index === imgIndex) ? "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>

Answer 3

Answer №2

If you're looking to toggle specific images based on user button clicks, JavaScript is the way to go!

Check out this simple example tailored for beginners:

// Create variables for better code readability

const helloButton = document.getElementById("hello-button")
const worldButton = document.getElementById("world-button")
const image1 = document.getElementById("image1")
const image2 = document.getElementById("image2")
const image3 = document.getElementById("image3")
const image4 = document.getElementById("image4")

// When "hello" button is clicked, call handleHelloClick function

helloButton.addEventListener("click", handleHelloClick);

// When "world" button is clicked, call handleWorldClick function

worldButton.addEventListener("click", handleWorldClick);

// Function to show/hide images when "hello" button is clicked

function handleHelloClick() {
  image1.style.display = "none";
  image2.style.display = "block";
  image3.style.display = "block";
  image4.style.display = "none";
}

// Function to show/hide images when "world" button is clicked

function handleWorldClick() {
  image1.style.display = "block";
  image2.style.display = "none";
  image3.style.display = "none";
  image4.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 4

If you're looking to toggle specific images based on user button clicks, JavaScript is the way to go!

Check out this simple example tailored for beginners:

// Create variables for better code readability

const helloButton = document.getElementById("hello-button")
const worldButton = document.getElementById("world-button")
const image1 = document.getElementById("image1")
const image2 = document.getElementById("image2")
const image3 = document.getElementById("image3")
const image4 = document.getElementById("image4")

// When "hello" button is clicked, call handleHelloClick function

helloButton.addEventListener("click", handleHelloClick);

// When "world" button is clicked, call handleWorldClick function

worldButton.addEventListener("click", handleWorldClick);

// Function to show/hide images when "hello" button is clicked

function handleHelloClick() {
  image1.style.display = "none";
  image2.style.display = "block";
  image3.style.display = "block";
  image4.style.display = "none";
}

// Function to show/hide images when "world" button is clicked

function handleWorldClick() {
  image1.style.display = "block";
  image2.style.display = "none";
  image3.style.display = "none";
  image4.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 5

Answer №3

To begin, conceal them using CSS and then reveal them upon clicking with JavaScript.

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 6

To begin, conceal them using CSS and then reveal them upon clicking with JavaScript.

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>

I need to swap out a pair of images simultaneously

Answer №1

Answer №2

Answer №3

Similar questions

Error in refreshing JWPlayer page: Plugin loading failure - File not located

Creating an associative array in javascript: A step-by-step guide

Tips for programmatically choosing images from a Google Photos collection?

Iterating over ng-repeat, the initial item with a distinct directive

What is the method for incorporating an async middleware into a router route?

Express.js: Communicating with internal microservices

What steps are involved in generating a scene dynamically with A-Frame?

AngularJS: Ensuring Controller Functions are Executed Post AJAX Call Completion via Service

What is the method for showcasing a specific value using a filter?

Modify the parameters of the apps.facebook.com URL using the Facebook API

Guide on sending a message to a specific channel using Discord.js version 13 with TypeScript

Ways to convert a JavaScript object into restful GET parameters in order to append them to the end of an API URL

Upcoming topics - The Challenge of Staying Hydrated at Basecamp One

How can I ensure that my script reruns when the window is resized?

Translate3d increases the whitespace towards the end of the page

The ng-repeat directive is causing issues with the functionality of the Angular carousal

ReactJs: The input value remains stagnant due to the utilization of Array.map

Utilize the Webstorm debugger in conjunction with node.js for seamless debugging

Expanding the `Odds` data points found in a JSON array by calculating their product

Unable to show <LI> elements