JSON Modal

Currently facing an issue while trying to create a modal by fetching data from a JSON file. The 'click' events seem to be malfunctioning within the authoring system, whereas if I manually insert the link and modal in my HTML file, everything works perfectly.

projectUi(items){
    let result = '';
    items.map(item=>{
        result +=`
            <div class="details-project">
               <a class="js-modal" href="#${item.modal}"></a>
            </div>


        <aside style="display: none;" id="${item.modal}" class="modal" aria-hidden="true" role="dialog" aria-labelledby="titleModal">
            <div class="modal-wrapper js-modal-stop">
                <button class="js-modal-close">Close</button>
                <h1 id="titleModal">Title ${item.modal}</h2>
            </div>
        </aside>
        `
    });
    const allPortfolio = document.querySelector('.all-portfolio');
    allPortfolio.innerHTML = result;
}

Answer №1

To check for errors on your webpage, open it in a browser and press F12 to access the console tab. This will show you any errors that are occurring so you can address them. Don't forget to override the display:none property if needed. If you're unable to fix the error, please share the error message with us for assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the simplest method to create a scroller for engaging narratives?

I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...

JavaScript Integration for Microsoft Dynamics NAV

I have developed a JavaScript Addin for Microsoft Dynamics Nav 2013. The Addin functions properly when used on the same machine as Navision. However, when I replace "localhost" with the machine's name, the Addin stops working. Below is the script I am ...

a guide on retrieving FormData objects in PHP

Hey everyone, I have a question regarding a sample code snippet I posted here. In this code, I am successfully uploading a file using Ajax JQuery. However, I am struggling to figure out how to read the content of the uploaded file in my PHP code. Can anyon ...

Combining AngularJS and Laravel for Efficient Username Retrieval using Eloquent Based on User ID

I'm currently working on an application that utilizes Angular for the front-end and Laravel for the back-end. My main query revolves around the process of retrieving the user's fullname based on their "author_id" in the posts table, which corresp ...

How to properly convert JSON into a string within a nested object

Below is the JSON that I am passing and its result when logged in the console: boundary: Array(1) 0: points: Array(98) 0: {x: 117.5, y: 99} 1: Point {x: 116.5, y: 100} 2: Point {x: 116.5, y: 103} 3: Point {x: 114.5, y: 109} 4: Point {x: 113.5, y: 116} 5: P ...

The problem with the first item title in the Jquery slider is causing

I've been working on setting up a Jquery slider (caroufredsel) in which I want certain elements to be displayed above the slider itself, outside of the wrapper. Everything is working fine except for the first slide! After spending several days trying ...

What is the best way to organize the size of multiple files into a single HTML card?

Is there a way to automatically arrange multiple items (photos/videos) within a single HTML card, similar to how it is done on Facebook or Instagram? I am looking for a library or JavaScript code that can help me achieve this without extending the size of ...

Getting a JSON array response with Java's HttpsURLConnection

Up until now, I have been using HttpsURLConnection to receive JSON objects as a response and then parsing them using the code below: ObjectMapper map = new ObjectMapper(); JsonNode node = map.readTree(conn.getInputStream()); Everything has been working s ...

Is it possible to access YouTube trends data using JSON with the YouTube API?

Is there a way to access Youtube Trends data in json format? You can check out the feed here: Youtube GDATA Tools Explore more about Youtube GDATA tools at: Sample json link Here's an example of a json link for most recent videos: Tried but fai ...

Displaying a base64 image in a new tab with JavaScript on iOS devices

Currently, I am receiving base64 data for an image and would like to open it in a new tab. To achieve this, my code looks something like this: var window = new window(); window.open("<iframe src="+base64Url+"); Interestingly, this method works perfec ...

The reactivity of Vuex mutation mutations may become compromised

state.js: export default () => ({ stepBarItems: [ { title: 'Introductory Details', active: false, current: false }, { title: 'Personal Information', active: false, current: false ...

Utilizing erb within a coffeescript file for modifying the background styling

Is there a way to change the background image of a div based on user selection from a dropdown menu? For instance, if the user picks "white" the background image becomes white, and for "red" it changes to red. I'm struggling with this in coffeescript ...

Creating a minigame using JQuery (Javascript)

I am currently developing a collection of mini-games for my big project. The approach I've taken in creating this mini-game is similar to one I used previously. However, unlike my previous version which only had one PuzzleContainer, this new iteration ...

Retrieve the customer's IP address in socket.io version greater than 1.3

How can I retrieve the IP address of an incoming connection when utilizing socket.IO in a Node.js Server with a version greater than 1.3? Currently, it only displays the server's IP address, but I require the client's IP address. I attempted to ...

Unable to extract string using JavaScript function

When dynamically generating table rows (buttons) using JS-Ajax, I am facing an issue. The removeProduct function alerts when a numeric value is parsed, but it does not alert for a string. Can anyone assist me in resolving this problem? The problem lies in ...

JavaScript - Unable to Modify Select Value with Event Listener

It's interesting how I can change the selected option in a dropdown list using JavaScript without any issues. However, when I try to do the same thing within an event listener, the option does not seem to change. Here's the HTML code: <select ...

The formatting for a class that was added using ClassList isn't functioning as expected

Despite my code appearing correct, the styles are not being applied even though the class is added. It was functioning perfectly before, so I'm not sure what caused this issue now. Any assistance would be greatly appreciated! JavaScript code: let max ...

Caution: A duplicate key was found in ReactJS when attempting to flatten children

Currently, I am utilizing Tabs from Material UI to showcase a List component that is filtered by the tab. Take a look at the code snippet below from my Container Component: <Tabs className="DrawerTabs" ...

The middleware function encountered an undefined value in req.body

I've been attempting to validate my data retrieved from my express endpoint using yup. Despite watching numerous tutorials, I am encountering a particular error that has me stuck. Every time I try to validate the data in my middleware, it consistentl ...

I am facing difficulty importing emotion js style using dynamic variables

I recently designed a webpage that has the following appearance: https://i.stack.imgur.com/AnIXl.jpg Here is the code from my _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme ...