Adding event listeners to modal buttons in a Handlebars template is a simple process that involves utilizing the `

Question

Adding event listeners to modal buttons in a Handlebars template is a simple process that involves utilizing the `

I've been working on developing a web application that interacts with a news API to display articles. Each article is presented in a card format, and I have also incorporated modals using handlebars.

My goal is for each card's button to trigger the opening of a modal containing unique information related to that specific article.

I'm currently facing an issue where clicking the button on the card does not open the corresponding modal, nor does it generate any error messages.

I suspect that there might be an issue with how the script is interpreting the button's class, denoted as {{@index}}.

<div class="">

  
    {{!-- #each article --}}

    <div class="row">

        {{#each articles}}
        
        <div class="col-12-sm col-6-md col-3-lg">
            <div class="card m-2">
                <div class="card-body">
                <h5 class="card-title">{{title}}</h5>
                <p class="card-text">{{description}}</p>
                </div>
                <img class="card-image" src="{{urlToImage}}" alt="Card image cap">
                <button id="mybtn" class="{{@index}}">Open Modal</button>
                            
            </div>
        </div>

        {{/each}}

    </div>
</div>


{{#each articles}}

        <!-- The Modal -->
        <div id="modid" class="modal">

            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <p>Some text in the Modal..</p>
            </div>
        </div>

{{/each}}


<script>

    
    let modal = document.getElementById("modid");

    let btn = document.getElementById("mybtn");

    let span = document.getElementsByClassName("close")[0];

    btn.onclick = function() {
        modal.style.display = "block";
    }

    span.onclick = function() {
            modal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == modal) {
                modal.style.display = "none";
        }
    }

    const btn = document.querySelector('.{{@index}}');
    btn.addEventListener('click', function(event){
        console.log('Button Clicked');
    }

        
</script>

If you have any insights or advice on how to resolve this issue, I would greatly appreciate your input!

javascript handlebars.js addeventlistener simplemodal

Answer 1

Answer №1

Initially, I suggest using a data-attribute like

data-open-modal="{{@index}}"

instead of class="{{@index}} for each button. This approach allows easy access to all open modal buttons and specific index values in the click handler.

Furthermore, assigning a single id, such as id="modid", to multiple modal elements is incorrect HTML practice. It's best to eliminate this id attribute to avoid confusion and specify the target modal clearly.

In the JavaScript section, select and store all open modal buttons and modals in variables:

const openModalButtons = document.querySelectorAll('[data-open-modal]');
const modals = document.querySelectorAll('.modal');

Iterate through each openModalButtons and attach a click event handler to them:

openModalButtons.forEach(openModalButton => {
  openModalButton.addEventListener('click', (event) => {
    const openIndex = Number(event.target.dataset.openModal);
    
    modals.forEach((modal, index) => {
      modal.classList.toggle('open', index === openIndex);
      modal.classList.toggle('closed', index !== openIndex)
    });
  });
});

Note that the click handler retrieves the index value from the clicked button's data-open-modal attribute, guiding which modal to display.

Then, it loops over each modal element setting the "open" class if the index matches the desired modal, or the "closed" class otherwise.

I have provided a handy reference fiddle.

Update: To handle closing functionality:

The close button can be handled similarly to the open button by attaching an event listener and utilizing a data-attribute:

<button class="close" data-close-modal="{{@index}}">&times;</button>

. Remember, a close button should ideally be a <button rather than a <span>.

The event listener for close buttons closely resembles that of open buttons. Instead of looping through all modals, it targets the modal matching the data-close-modal attribute value of the clicked button.

const closeModalButtons = document.querySelectorAll('[data-close-modal]');

closeModalButtons.forEach(closeModalButton => {
  closeModalButton.addEventListener('click', (event) => {
    const closeIndex = Number(event.target.dataset.closeModal);
    
    modals[closeIndex].classList.remove('open');
    modals[closeIndex].classList.add('closed');
  });
});

Note: Depending on your needs, you may only need either an .open or a .closed class for your modals - one may suffice. The current setup is just an example.

An updated version of the fiddle is available here.

Answer 2

Initially, I suggest using a data-attribute like

data-open-modal="{{@index}}"

instead of class="{{@index}} for each button. This approach allows easy access to all open modal buttons and specific index values in the click handler.

Furthermore, assigning a single id, such as id="modid", to multiple modal elements is incorrect HTML practice. It's best to eliminate this id attribute to avoid confusion and specify the target modal clearly.

In the JavaScript section, select and store all open modal buttons and modals in variables:

const openModalButtons = document.querySelectorAll('[data-open-modal]');
const modals = document.querySelectorAll('.modal');

Iterate through each openModalButtons and attach a click event handler to them:

openModalButtons.forEach(openModalButton => {
  openModalButton.addEventListener('click', (event) => {
    const openIndex = Number(event.target.dataset.openModal);
    
    modals.forEach((modal, index) => {
      modal.classList.toggle('open', index === openIndex);
      modal.classList.toggle('closed', index !== openIndex)
    });
  });
});

Note that the click handler retrieves the index value from the clicked button's data-open-modal attribute, guiding which modal to display.

Then, it loops over each modal element setting the "open" class if the index matches the desired modal, or the "closed" class otherwise.

I have provided a handy reference fiddle.

Update: To handle closing functionality:

The close button can be handled similarly to the open button by attaching an event listener and utilizing a data-attribute:

<button class="close" data-close-modal="{{@index}}">&times;</button>

. Remember, a close button should ideally be a <button rather than a <span>.

The event listener for close buttons closely resembles that of open buttons. Instead of looping through all modals, it targets the modal matching the data-close-modal attribute value of the clicked button.

const closeModalButtons = document.querySelectorAll('[data-close-modal]');

closeModalButtons.forEach(closeModalButton => {
  closeModalButton.addEventListener('click', (event) => {
    const closeIndex = Number(event.target.dataset.closeModal);
    
    modals[closeIndex].classList.remove('open');
    modals[closeIndex].classList.add('closed');
  });
});

Note: Depending on your needs, you may only need either an .open or a .closed class for your modals - one may suffice. The current setup is just an example.

An updated version of the fiddle is available here.

Adding event listeners to modal buttons in a Handlebars template is a simple process that involves utilizing the `

Answer №1

Similar questions

Looping through each combination of elements in a Map

Tips for interpreting information from a JSON array that has been stringified, looping through the data, and utilizing it effectively

Various web browsers are displaying distinct jQuery errors when executing the code

Polymer 1.0: Failure to update when binding CSS classes

Add a Page to Your Domain Name using the Text Input Box

Steps to refresh a variable when the SMS read plugin successfully completes

Encountering a Basic React Issue: Unable to Implement @material-ui/picker in Next.js

populating a multi-dimensional array using a "for" loop in Javascript

Use hyphens instead of spaces in angular js data binding

How can the error within a promise be captured when using resolve()?

Sorting custom strings in Javascript with special characters like dash (-) and underscore (_)

I'm baffled by the unexpected result I'm getting when using 'foreach' in node.js

Embedding Vue component into a traditional PHP/jQuery project

Is there a way to verify if an ID includes more than one word?

Disappearing Cloned Form Fields in jQuery

What causes an "Internal Server Error" when attempting to use data for a database request with AJAX GET/POST in Laravel?

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

Tips for extracting data from a JQuery table with Python

Tips for setting a default value in a Multi Select component with reactjs and Material UI

The Quasar application does not eliminate console.log() statements during production builds