Leveraging JavaScript code repeatedly

Question

Leveraging JavaScript code repeatedly

Apologies if this question has been asked before, as I couldn't find it.

I have an HTML table with images used 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>

A script controls this functionality:

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

However, when I try to replicate the format for a second image on the same page and table, the script stops working.

Is JavaScript not able to handle multiple elements in the same way that CSS can with IDs?

This is my first time using JavaScript alongside HTML and CSS.

javascript html css

Answer 1

Answer №1

When you run the document.querySelector(".modal") function, it selects the first element with the class "modal". In this case, it would be the div containing the initial picture. After that, you attach a 'click' event to only the first picture.

An alternative approach is to use querySelectorAll, which provides a list of all matched elements. You can then iterate through these nodes to add the 'click' event listener as shown below:

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

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

Answer 2

When you run the document.querySelector(".modal") function, it selects the first element with the class "modal". In this case, it would be the div containing the initial picture. After that, you attach a 'click' event to only the first picture.

An alternative approach is to use querySelectorAll, which provides a list of all matched elements. You can then iterate through these nodes to add the 'click' event listener as shown below:

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

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

Answer 3

Answer №2

I'm not entirely sure about the specific question you're asking. However, based on my assumptions, here's a brief code snippet that may assist 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>

Answer 4

I'm not entirely sure about the specific question you're asking. However, based on my assumptions, here's a brief code snippet that may assist 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>

Answer 5

Answer №3

In the case of a small application, one possible solution could involve creating an object of images that includes their respective details. This can be achieved by defining the images in the following way:

//By adding properties to the objects, you can customize them as needed
    images = [{
        src: "D:\Elly Research\CO2858\Presentation\Calypso_map.jpg"
    },
    {
        src: "D:\Elly Research\CO2858\Presentation\Calypso_map_alternative.jpg"
    }]

Subsequently, you have the option to iterate over this object to populate your table or directly create the table with specific ID references such as

<button id="0" class="trigger">

. By utilizing the event object array index, you can access these references using the following code:

var id = event.target.id

To dynamically generate the image element within the modal view, the function should resemble the following structure:

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

It is important to remember to remove any existing image elements before adding a new one:

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

We hope this guidance proves beneficial for your project! Best of luck with your studies!

Answer 6

In the case of a small application, one possible solution could involve creating an object of images that includes their respective details. This can be achieved by defining the images in the following way:

//By adding properties to the objects, you can customize them as needed
    images = [{
        src: "D:\Elly Research\CO2858\Presentation\Calypso_map.jpg"
    },
    {
        src: "D:\Elly Research\CO2858\Presentation\Calypso_map_alternative.jpg"
    }]

Subsequently, you have the option to iterate over this object to populate your table or directly create the table with specific ID references such as

<button id="0" class="trigger">

. By utilizing the event object array index, you can access these references using the following code:

var id = event.target.id

To dynamically generate the image element within the modal view, the function should resemble the following structure:

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

It is important to remember to remove any existing image elements before adding a new one:

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

We hope this guidance proves beneficial for your project! Best of luck with your studies!

Answer 7

Answer №4

Utilizing JavaScript multiple times is possible. Be sure to inspect the source of your images. This topic has been previously addressed in this discussion - src absolute path problem.

Answer 8

Utilizing JavaScript multiple times is possible. Be sure to inspect the source of your images. This topic has been previously addressed in this discussion - src absolute path problem.

Leveraging JavaScript code repeatedly

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What's the best way to transform createHmac function from Node.js to C#?

Adjust the HTML layout based on the JSON data provided

Testing a cucumber scenario by comparing the redirect URL with a different URL

Using ReactJS to activate child components from a parent component

What is the best way to restrict a React input field to have values within the minimum and maximum limits set by its

"Why isn't the reordering functionality functioning properly after the button has been clicked

Conceal the cursor within a NodeJS blessed application

Tips for adding a solid background color to a div element

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

The difference in percentage padding rendering is specific to Firefox only

Is there a way to refresh a webpage without the need to reload it

Retention of user-entered data when navigating away from a page in Angular

How can the HTML email width be adjusted on Outlook 2016?

Is the utilization of the React context API in NextJS 13 responsible for triggering a complete app re-render on the client side

"Launching a node server in Azure to get you up and running

What is the most effective way to determine which radio button is currently selected in a group with the same name using JQuery?

The Final Div Fluttering in the Midst of a jQuery Hover Effect

Transform a list of file directories into a JSON format using ReactJS

The timing of the RequestAnimationFrame function varies based on the dimensions of my canvas

Using a JQuery variable to display a div using the .show() method