Showing multiple images on click for multiple links-CodePudding

I'm trying to get 10 elements to appear when the user clicks one of five links. I will only show two here to save time.
These 'appearing' elements need to be links in some way or another.

HTML - LINKS


        <a  href="#!"
          ><h1 >A boring website</h1></a


        <a  href="#!"
          ><h1 >Unoriginal.co.uk</h1></a

HTML - Appearing elements



      <a  href="main.html">
        <div >
          <img
            
            src="images/pink-pop-up.png"
            alt="pink pop up"
          />
          <img
            
            src="images/spinning-star.gif"
            alt="animated star gif"
          />
        </div>
      </a>
      <a  href="main.html">
        <div >
          <img
            
            src="images/black-pop-up.png"
            alt="black pop up"
          />
          <img
            
            src="images/stars.gif"
            alt="animated star background"
          />
          <h1 >
            CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
          </h1>
        </div>

JS - This is my JS for one link, copy and pasted 2 times for convenience sake (in the real code it's 5 times for 5 links), with the elementToClick set to different classes (toggler1,toggler2... etc) within each tag. If I copy and paste this again, with another elementToShow (mydiv2 for example), this doesn't work - only one of the elements will appear

 <script>
      var elementToClick = document.querySelector(".toggler1");

      var elementToShow = document.querySelector(".mydiv1");

      if (elementToClick) {
        elementToClick.addEventListener("click", showElement);
      }

      function showElement() {
        elementToShow.classList.add("show");
      }
    </script>
    <script>
      var elementToClick = document.querySelector(".toggler2");
      var elementToShow = document.querySelector(".mydiv1");

      if (elementToClick) {
        elementToClick.addEventListener("click", showElement);
      }

      function showElement() {
        elementToShow.classList.add("show");
      }
    </script>

CSS


/* POP UP 1 */

.mydiv1 {
  display: none;
}

.mydiv1.show {
  display: block;
}

/* POP UP 2 */

.mydiv2 {
  display: none;
}

.mydiv2.show {
  display: block;
}

Thank you for looking at this mess, I am very new to Javascript and I'm sure I'm making this unnecessarily complicated for myself. If anyone can tell me how to get this working it would be greatly appreciated! Thanks!

CodePudding user response：

Wrap all the elements you want to show in a div tag. For example:

<div id="elementToShow">
      <a  href="main.html">
      .....
</div>

In your js select that enclosing element

var elementToShow = document.querySelector("#elementToShow");

CodePudding user response：

In your Javascript code, in the showElement, use elementToShow.classList.toggle("show"); instead of elementToShow.classList.add("show");.

var elementToClick = document.querySelector(".toggler1");
  
var elementToShow = document.querySelector(".mydiv1");

if (elementToClick) {
  elementToClick.addEventListener("click", showElement);
}

function showElement() {
  elementToShow.classList.toggle("show");
}


var elementToClick = document.querySelector(".toggler2");
var elementToShow = document.querySelector(".mydiv1");

if (elementToClick) {
  elementToClick.addEventListener("click", showElement);
}

function showElement() {
  elementToShow.classList.toggle("show");
}

/* POP UP 1 */

.mydiv1 {
    display: none;
  }
  
  .mydiv1.show {
    display: block;
  }
  
  /* POP UP 2 */
  
  .mydiv2 {
    display: none;
  }
  
  .mydiv2.show {
    display: block;
  }

<a  href="#!"
  ><h1 >A boring website</h1>
</a>


<a  href="#!">
  <h1 >Unoriginal.co.uk</h1>
</a>


<a  href="main.html">
  <div >
    <img
      
      src="images/pink-pop-up.png"
      alt="pink pop up"
    />
    <img
      
      src="images/spinning-star.gif"
      alt="animated star gif"
    />
  </div>
</a>
<a  href="main.html">
  <div >
    <img
      
      src="images/black-pop-up.png"
      alt="black pop up"
    />
    <img
      
      src="images/stars.gif"
      alt="animated star background"
    />
    <h1 >
      CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
    </h1>
  </div>
  </a>

CodePudding user response：

The problem is in JavaScript part. You have multiple script tags, each of which have elementToClick and elementToShow. When you define elementToClick in the second (or any other) script tag, the previous ones are being overwritten. You only have one elementToClick and one elementToShow, instead of five. The same is true for all the other variables and functions (showElement).

Another piece of advice, try to use reusable code and try to never copy and paste code, like you did here. You can define one function:

 function showElement(elementToShow) {
    elementToShow.classList.toggle("show");
  }

Then you can call this function for each of five elements:

let elements = [
    {toggler: 'toggler1', div: 'div1'},
    {toggler: 'toggler2', div: 'div2'},
    ...
];
for (let el of elements) {
    let toggler = document.querySelector(`.${el.toggler}`);
    let div = document.querySelector(`.${el.div}`);
    toggler.addEventListener('click', () => showElement(div)); // add a click listener with a corresponding div
}

Hope this helps!