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

Html – How to make images replace each other with a button?

So, I’m trying to develop a sort of visual novel, and I’m trying to make a code to replace other images when a specific image appears, (for example, if "happy" is onscreen i want "sad" to be hidden so the pictures don’t overlap eachother)
Here’s my code:

<style>
section {
  display: none;
}

.d-block {
  display: block;
}
</style>
<section class="d-block">Horace</section>
<section>Ursa</section>
<section><img id=sad src=https://png.pngtree.com/png-clipart/20220716/ourmid/pngtree-banana-yellow-fruit-banana-skewers-png-image_5944324.png></section>
<section><img id=neutral src=https://www.shutterstock.com/image-photo/banana-bunch-five-600nw-1057197824.jpg></section>
<section><img id=happy src=https://t4.ftcdn.net/jpg/05/65/93/25/360_F_565932566_6bll77MbikvLen4pPoLVvlrqmvKTZ7Nw.jpg></section>
<section>Thus</section>

<button>Next</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
const TextShower = document.querySelector('button');
TextShower.addEventListener('click', function() {
  let hidden_section = document.querySelector('section:not(.d-block)');
  if (hidden_section != null) {
    hidden_section.classList.add('d-block');
  } else {
    TextShower.disabled = true;
    }
  });
  const Happy = document.getElementById("happy")
  if (happy.hasAttribute("d-block")) {
  document.getElementById("sad","neutral").removeAttribute("d-block")
        }
  });
    </script>

  const Happy = document.getElementById("happy")
  if (happy.hasAttribute("d-block")) {
  document.getElementById("sad","neutral").removeAttribute("d-block")
        }
  });

this is the if statement i tried to create to replace the portraits. did not work

Tags:

2

Answers


  1. 0 
    if (hidden_section.querySelector('img#happy')) {
    document.getElementById("sad").classList.remove('d-block');
    document.getElementById("neutral").classList.remove('d-block');
    Login or Signup to reply.
  2. 0

    So if I get the question right you are trying to show one image at a time on button click [If "happy" shown hide the "sad/neutral" or vice versa.]

    NOTE: You can run the code in the codePen for the quick verification and it work just fine.

    Here’s how you can do it.

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,  initial-scale=1.0">
<title>Visual Novel</title>
<style>
  section img {
    display: none;
  }
  .active img {
    display: block;
  }
</style>
</head>
<body>

<-- Images -->
<section><img id="sad" src="https://png.pngtree.com/png-clipart/20220716/ourmid/pngtree-banana-yellow-fruit-banana-skewers-png-image_5944324.png"></section>
<section><img id="neutral" src="https://www.shutterstock.com/image-photo/banana-bunch-five-600nw-1057197824.jpg"></section>
<section class="active"><img id="happy" src="https://t4.ftcdn.net/jpg/05/65/93/25/360_F_565932566_6bll77MbikvLen4pPoLVvlrqmvKTZ7Nw.jpg"></section>

<button id="nextButton">Next</button>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const images = document.querySelectorAll('section');
    let currentIndex = 0;
 const nextButton = document.getElementById('nextButton');
    nextButton.addEventListener('click', function() {
      // Hide the current image
      images[currentIndex].classList.remove('active');
      
      // Increment index or loop back to the first image
      currentIndex = (currentIndex + 1) % images.length;

      // Show the next image
      images[currentIndex].classList.add('active');
    });
  });
</script>

</body>
</html>

    If you want to undertsand what happend here you go:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Toggle</title>
<style>
  section img {
    display: none;
  }
  .active img {
    display: block;
  }
</style>
</head>
<body>
    • Defined a title for the page in the head section.
    • Inside the <style> tag in the <head> section, we define CSS rules for styling the image.
    • a. display:none for images inside the section hide the images by-default.
    • b. Define a class .active that makes images visible as display:block.

    NOTE Happy image have the .active class for now.

    <section class="active"><img id="sad" src="https://png.pngtree.com/png-clipart/20220716/ourmid/pngtree-banana-yellow-fruit-banana-skewers-png-image_5944324.png"></section>
<section><img id="neutral" src="https://www.shutterstock.com/image-photo/banana-bunch-five-600nw-1057197824.jpg"></section>
<section><img id="happy" src="https://t4.ftcdn.net/jpg/05/65/93/25/360_F_565932566_6bll77MbikvLen4pPoLVvlrqmvKTZ7Nw.jpg"></section>
    • Each image inside the section with the sad and neutral being hidden by default.
    • Happy image have the class .active hence its displayed.
    <button id="nextButton">Next</button>
    • When clicked on button we will toggle between the images.
    <script>
  document.addEventListener("DOMContentLoaded", () => {
    const images = document.querySelectorAll('section');
    let currentIndex = 0;

    const nextButton = document.getElementById('nextButton');
    nextButton.addEventListener('click', function() {
      // Hide the current image
      images[currentIndex].classList.remove('active');
      
      // Increment index or loop back to the first image
      currentIndex = (currentIndex + 1) % images.length;

      // Show the next image
      images[currentIndex].classList.add('active');
    });
  });
</script>
    • When the DOM content is loaded DOMContentLoaded,we execute code inside the callback function.
    • We select all section and store them inside the images variable.
    • We initialized a variable currentIndex to keep track of the currently active image.
    • We clicked on next button add the event listener for click event.
    • Button clicked:
      • a. We remove the .active class from the currently active image ["happy"], hiding it.
      • b. We increment the currentIndex.
      • c. We add the .active class to the next image, making it visible.

    This way, clicking the button toggles between the images, showing only one image at a time. The images cycle through in a loop, so after reaching the last image, clicking the button will show the first image again.

    NOTE — its better to have the toggleClass rather than adding or removing class separately or based on attribute add or remove class.

    Integrate the answer and have the logic work for your own code.

    Keep Learning and keep exploring.

    Happy Coding and have a good day❤️.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search