Using JavaScript script multiple times

Question

I don't believe this has been asked before. If it has I apologise as I couldn't find it.

I have an HTML table with pictures as buttons:

<td>
  <button class="trigger">
    <img src="D:\Elly Research\ CO2858\Presentation\Calypso_map.jpg">
  </button>
</td>

<div class="modal">
  <div class="modal-content">
    <span class="close-button">&times; </span>
    <img src="D:\Elly Research\CO2858\Presentation\Calypso_map.jpg">
    <script src="D:\Elly Research\CO2858\Presentation\modal.js"></script>
  </div>
</div>

This is controlled by a script:

var modal = document.querySelector(".modal");
var trigger = document.querySelector (".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
  modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
  if(event.target === modal){
    toggleModal();
  }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

If I copy the format of the first picture and use it for a second picture in the same table and same page, it stops working.

Does JavaScript not work like CSS where I can use multiple ID's to be controlled by one CSS value?

This is the first time I've used JavaScript with HTML and CSS.

What "stops working"? Please describe the expected behavior and the observed behavior. Screenshots can help too! — Guillaume CR, Aug 15 '18 at 19:13
apologies, i want the pictures to popup when clicked on, the script works on the first picture only. I would of thought if i copied the code to the second picture then it would make that picture popup but it doesnt.... — 4am Robert, Aug 16 '18 at 20:40

score 2 · Answer 1 · answered Aug 15 '18 at 19:20

When you do document.querySelector(".modal") you are selecting the first node that has the class "modal". Which in your case would be the div containing the first picture. And later you add the 'click' event to only the first picture.

You can use querySelectorAll, which returns a list of all the matching nodes and loop through all nodes to add the 'click' event listener like so:

const modals = document.querySelector(".modal");

modals.forEach(modal => {
    modal.addEventListener('click', toggleModal)
});

score 1 · Answer 2 · answered Aug 15 '18 at 19:32

If it is a small application, a simple solution to this could be the creation of an object of images, containing its details, like this: //Here you can add as many properties you want for the objects images = [{ src: "D:\Elly Research\CO2858\Presentation\Calypso_map.jpg" }, { src: "D:\Elly Research\CO2858\Presentation\Calypso_map_alternative.jpg" }]

Then you could iterate over it to generate your table, or simply create your table with some ID refs, like <button id="0" class="trigger">, therefore you can access them in the event object array index with this code:

var id = event.target.id

So, to generate the img element inside the modal, you'll have something like this: function toggleModal(event){ var id = event.target.id; var div = document.getElementsByClassName('modal-content')[0]; div.innerHTML += '<img class="modal-image" src="'+images[id].src+'" />'; modal.classList.toggle("show-modal"); }

But make sure you destroy the img element when it already have one:

var child = div.querySelector("img");
if(child != null){
    div.removeChild(child);
}

Hope it helps you!! Good luck with your study!

score 1 · Accepted Answer · answered Aug 15 '18 at 19:49

I am not sure what exactly you are trying to ask. Based on my assumptions here is a small snippet. Hope it helps you.

var modal = document.getElementById("modal")
window.addEventListener("click", windowOnClick);
document.querySelector(".close-button").addEventListener("click", toggleModal)

function showImage(event){
 toggleModal()
  modal.getElementsByTagName("img")[0].src =event.srcElement.src
}

function windowOnClick(event){
  if(event.srcElement === modal){
    toggleModal()
  }
}

function toggleModal(){
  modal.classList.toggle("show-modal")
}

td > img{
  width: 100px;
  height: auto;
}

.modal{
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index=10;
}

.show-modal{
  display: block !important;
}

.modal-content{
  width: 60%;
  height: auto;
  margin: 0 auto;
}

.close-button{
  color: white;
  cursor: pointer;
}

#viewer{
  width:100%;
  height: auto;
}

<!doctype>
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <img src="https://i.imgur.com/GV6086A.jpg" onclick="showImage(event)" />
        </td>
        <td>
          <img src="https://i.imgur.com/opERcp1.jpg" onclick="showImage(event)" />
        </td>
      </tr>
      <tr>
        <td>
          <img src="https://i.imgur.com/lieUEvQ.jpg" onclick="showImage(event)" />
        </td>
        <td>
          <img src="https://i.imgur.com/B63gaEQ.jpg" onclick="showImage(event)" />
        </td>
      </tr>
      
    </table>
    <div class="modal" id="modal">
      <div class="modal-content">
       <span class="close-button">&times; </span>
        <img id="viewer">
      </div>
    </div>
  </body>
</html>

This is exactly what i wanted thank you! i just need to put that into my code, you are a god send i need this for tomorrow morning lol thank you so much :) — 4am Robert, Aug 16 '18 at 20:42

score 0 · Answer 4 · answered Aug 15 '18 at 19:22

0

You can use js multiple times. Check the src of your images. It's discussed already here -src absolute path problem.

answered Aug 15 '18 at 19:22

Olusola Omosola

847
9
9

Using JavaScript script multiple times

4 Answers4