Showing multiple images on click for multiple links

user_18918078 0
Viewed 43

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 class="toggler1" href="#!"
          ><h1 class="website-titles">A boring website</h1></a


        <a class="toggler2" href="#!"
          ><h1 class="website-titles">Unoriginal.co.uk</h1></a

HTML - Appearing elements



      <a class="mydiv1" href="main.html">
        <div class="pop-up-1">
          <img
            class="mydiv1-bg"
            src="images/pink-pop-up.png"
            alt="pink pop up"
          />
          <img
            class="mydiv1-gif"
            src="images/spinning-star.gif"
            alt="animated star gif"
          />
        </div>
      </a>
      <a class="mydiv2" href="main.html">
        <div class="pop-up-2">
          <img
            class="mydiv2-bg"
            src="images/black-pop-up.png"
            alt="black pop up"
          />
          <img
            class="mydiv2-gif"
            src="images/stars.gif"
            alt="animated star background"
          />
          <h1 class="mydiv2-text">
            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!

css html javascript
3 Answers

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 class="toggler1" href="#!"
  ><h1 class="website-titles">A boring website</h1>
</a>


<a class="toggler2" href="#!">
  <h1 class="website-titles">Unoriginal.co.uk</h1>
</a>


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

user_138170410

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

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

In your js select that enclosing element

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

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!

user_138972340
Related