CODEWITHSUNDEEP
javascripthtmlcss
4am Robert
4am Robert

Reputation: 3

Using JavaScript script multiple times

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.

Upvotes: 0

Views: 569

Answers (4)

Dhanush Srinivasa
Dhanush Srinivasa

Reputation: 36

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>

Upvotes: 1

fricardi
fricardi

Reputation: 70

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!

Upvotes: 1

Olusola Omosola
Olusola Omosola

Reputation: 905

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

Upvotes: 0

ybl
ybl

Reputation: 1605

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)
});

Upvotes: 2

Related Questions