Access data in JavaScript regardless of the specific element name

Question

Access data in JavaScript regardless of the specific element name

In an attempt to target a modal without an id or class, I am faced with a challenge. This is because the team page in our CMS assigns a unique

data-modal="NAME-I-WILL-NOT-KNOW"

for each team member added.

The "NAME-I-WILL-NOT-KNOW" part of the code is controlled by the CMS.

For example: If a client adds a new team member named "Bob Smith", the resulting HTML code will be:

Button

<div class="button-wrap">
  <a rel="modal:open" class="button is-danger is-rounded modal-button" data-modal-target="bobsmith" aria-haspopup="true">
    <span>View Profile</span>
  </a>
</div>

Modal

<div id="modalopen" class="modal" data-modal="bobsmith">
</div>

I have attempted various methods using document.querySelector, but none seem quite right. The following seems like a step in the right direction.

var modal = document.querySelector("[data-modal=" + target + "]");

Unfortunately, this method does not work as expected.

I've excluded the CMS elements in this demo for clarity purposes.

I thought that sharing the CSS and HTML structure would help explain my issue better.

javascript

Answer 1

Answer №1

One way to locate an element with a data-modal attribute is by using the document.querySelector method.

This method will identify the initial element containing a data-modal attribute, regardless of its specific value..

Answer 2

One way to locate an element with a data-modal attribute is by using the document.querySelector method.

This method will identify the initial element containing a data-modal attribute, regardless of its specific value..

Answer 3

Answer №2

To create a modal, you can utilize the btn.onclick event like this:

btn.onclick = function openModal(event) {

    var target = this.dataset.modalTarget;
  
    // Get the modal
    var modal = document.querySelector("[data-modal=" + target + "]");
    modal.style.display = "block";
}

Make sure to define the modal variable first and include some checks in other listeners using modal. The following snippet provides a corrected version:

var modal = undefined;

// Get the button that opens the modal
var btn = document.getElementById("modal_open");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("modal-close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function openModal(event) {

    var target = this.dataset.modalTarget;
    
    // Get the modal
    modal = document.querySelector("[data-modal=" + target + "]");
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    if (modal === undefined) return;

    modal.style.display = "none";
}

// Close the modal when clicking outside of it
window.onclick = function(event) {
    if (modal === undefined) return;

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

.team {
  /* CSS Styles for the team section */
}

/* Additional CSS styles as per requirement */

If your CMS handles the target variable differently, there might be a more suitable solution for your scenario. You can also extend the above solution to handle multiple buttons simultaneously by using

document.querySelectorAll('[data-modal-target]')

to select all buttons at once and iterate over them.

Answer 4

To create a modal, you can utilize the btn.onclick event like this:

btn.onclick = function openModal(event) {

    var target = this.dataset.modalTarget;
  
    // Get the modal
    var modal = document.querySelector("[data-modal=" + target + "]");
    modal.style.display = "block";
}

Make sure to define the modal variable first and include some checks in other listeners using modal. The following snippet provides a corrected version:

var modal = undefined;

// Get the button that opens the modal
var btn = document.getElementById("modal_open");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("modal-close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function openModal(event) {

    var target = this.dataset.modalTarget;
    
    // Get the modal
    modal = document.querySelector("[data-modal=" + target + "]");
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    if (modal === undefined) return;

    modal.style.display = "none";
}

// Close the modal when clicking outside of it
window.onclick = function(event) {
    if (modal === undefined) return;

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

.team {
  /* CSS Styles for the team section */
}

/* Additional CSS styles as per requirement */

If your CMS handles the target variable differently, there might be a more suitable solution for your scenario. You can also extend the above solution to handle multiple buttons simultaneously by using

document.querySelectorAll('[data-modal-target]')

to select all buttons at once and iterate over them.

Answer 5

Answer №3

You need to remember to include the quotes correctly. The correct format is "[data-modal='bobsmith']". Give this a try:

var modal = document.querySelector("[data-modal='" + target + "']");

Answer 6

You need to remember to include the quotes correctly. The correct format is "[data-modal='bobsmith']". Give this a try:

var modal = document.querySelector("[data-modal='" + target + "']");

Answer 7

Answer №4

I appreciate all the assistance from everyone. Your responses have guided me towards a new inquiry that ultimately resulted in finding a comprehensive solution.

For further details, refer to Denis Mysenko's response in this discussion

Answer 8

I appreciate all the assistance from everyone. Your responses have guided me towards a new inquiry that ultimately resulted in finding a comprehensive solution.

For further details, refer to Denis Mysenko's response in this discussion

Access data in JavaScript regardless of the specific element name

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide to dynamically adding a class in VueJS based on a certain condition

JavaScript function is returning 'undefined' instead of an integer

Verify that the value being returned is in the form of a promise

Clicking on an object will trigger the threejs to traverse through

Adding optional properties to TypeScript interfaces

Question about Looping Concept

How to display an unordered list horizontally in HTML

Assigning a session variable through a dropdown selection

Issue with retrieving the ID of a dynamically created element with jQuery

Is there a way to extract the unicode/hex representation of a symbol from HTML using JavaScript or jQuery?

When the chart is zoomed in, Highcharts displays points outside the chart area when hovering over the line

Utilizing base classes in callbacks with ES6 in NodeJS

Adjust the sound levels with a sleek jQuery UI volume slider

Troubleshooting the compatibility issues between Angular and D3.js V4 Zoom functionality

Unable to resolve the issue within Angular UI modal

What is the process for creating a list using layers that are published in Geoserver?

What is the best way to extract information from a JavaScript page when the content is identified by a reference?

Tips for making objects rotate vertically on their axis and orbit around another object in three.js

Listeners for JavaScript actions

Retrieving constant values from a JSON object