Unexpected malfunction of Wordpress modals and JavaScript stopped abruptly

I previously had a website built with pure JS and HTML, but decided to transfer it to WordPress. Everything was functioning properly until a few days ago when two of my functions suddenly stopped working. Both functions are supposed to add an "active" class - the first one triggers a modal function and the second one is for tab functionality. It was working perfectly fine before, but now I suspect that it may be due to a WordPress update. The page where the functions are not working is: - specifically the second "slide", which is a projector with dots on it that should trigger the modal.

I have a fully functional version of the website here: . This is how it should be working, and it was working fine until it suddenly stopped. Does anyone know why adding the "active" class has become an issue, or what the problem might be? Thank you so much for your help!

Here is an image showing the broken part: https://i.sstatic.net/haooy.jpg

javascripthtmlcsswordpressmodal-dialog

Answer №1

It appears that the second link () is functioning correctly. Upon comparing the two links, I observed that both have the "dots" configured with data-toggle="#point-modal", indicating that the modal container (div) must have a unique ID of "point-modal."

However, on this website (), the modal container is present but lacks the point-modal ID attribute, leading to the inability to locate it.

To identify if the ID is missing, a simple method is to run 

document.getElementById('point-modal')
in the developer console. This will return null for . Essentially, it is crucial to ensure that the modal container corresponding to each "dot" has the correct ID.

<div class="point skrollable skrollable-before" data-toggle="modal" data-target="#point-modal">

should be accompanied by

<div class="modal fade" id="point-modal"....>

Feel free to ask if you require further clarification on any point.

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

Verify if there is a value in at least one of the multiple input fields

I have 4 input fields and I need to check if at least one of them has a value. If none of them are filled out, I want the function to stop. Below is the current code snippet I'm using but it's not working as expected because it doesn't ente ...

javascriptjqueryhtml

Try to refrain from invoking effect within a component that is being conditionally rendered

I have a particular component that I am working with: const Component = () => { useEffect(() => { console.log('Executing useEffect in the Component') }, []) return <Text>element</Text>; } Whenever I conditionally re ...

javascriptreactjsrenderingreact-hooks

Scroll Bars do not appear on mobile devices until they are scrolled

On this page, I have included a table with a maximum height. If the content exceeds this height, a custom scrollbar should appear. However, there is an issue on mobile devices where the scrollbar does not display until the content is scrolled. Click here ...

cssbootstrap-4responsive-design

What is the best way to avoid using ng-repeat for the last item being shown?

I currently have an ng-repeat loop that is dependent on an ng-if condition. Here is the specific code block: <div class="fav-prod-customised> <p ng-repeat="ingredient in product.options" ng-if="ingredient.default_quantity == 0 & ...

htmlcssangularjs

Is it possible to alter the color of the text "midway" within a character on a website?

In some desktop applications, I've noticed a cool feature where the color of text changes as the background evolves. This allows for multiple colors on a single character, which is especially useful when displaying progress bars with percentages insid ...

htmlcsscolorsprogress-bar

Showcasing the most recent three Wordpress blog posts in a Bootstrap4 carousel

I'm currently working on a Bootstrap4 carousel that should display the featured image, title, and the beginning of the 3 latest blog posts. Although the desired content is showing up in the carousel, it seems to be stuck on the first post without auto ...

wordpressbootstrap-4

Unable to modify the state of data in Vue.js

After developing a weather app, I implemented some components with fields in the data section. However, when I changed the value of these fields in the methods section and attempted to access them in another method, I discovered that the old values were be ...

javascriptvue.js

Why can't JQuery/javascript's dynamic gallery's images be used as buttons instead of links?

I've been struggling with my online portfolio for several nights as I build my website. Despite exhaustive internet searches, I couldn't quite articulate my problem in words and tried multiple workarounds. To see the issue, please visit the beta ...

javascriptjqueryhtmlgallerytoggle

What is the best way to resize an SVG to perfectly fit the parent div container?

I need to display multiple SVGs from various sources, each with different height, width, and viewbox. I want them all to render within a fixed height and width div, filling up the available space. How can I scale these SVGs to fit the container div? For i ...

javascripthtmlcsssvg

How can I obtain the current state of HTML checkboxes from a local JSON file?

I have an HTML table with checkboxes, and I want to save the state of each checkbox in a local .JSON file instead of using localStorage. When the page reloads, I want it to automatically load the saved JSON file to retrieve the previously configured checkb ...

javascripthtmljquery

What is the best way to transfer a multidimensional array from PHP to JavaScript?

Attempting to extract array value from a JSON string, I utilize the json_decode function in PHP. <?php $jsonContent=file_get_contents('http://megarkarsa.com/gpsjson.php'); $jsonDecoded=json_decode($jsonContent,true); foreach($jsonEncoded[&apo ...

javascriptphparraysjsonmultidimensional-array

Modifying the values of array elements in MongoDB

I am currently attempting to modify specific elements within an array. This particular array consists of objects that have two distinct fields. The displayed output from my view is as follows: Each line in the display corresponds to the index of the objec ...

javascriptnode.jsmongodb

Having trouble with looping through subarrays using Javascript and JSON

I am attempting to iterate through a JSON object using Javascript (jQuery). Within the main JSON object, each object in the array contains embedded arrays of tags. My goal is to loop through all the files in the main object and simultaneously iterate thro ...

javascriptjson

The most efficient method for distributing code between TypeScript, nodejs, and JavaScript

I am looking to create a mono repository that includes the following elements: shared: a collection of TypeScript classes that are universally applicable WebClient: a react web application in JavaScript (which requires utilizing code from the shared folde ...

javascriptnode.jsreactjstypescriptwebpack

Error: Node.js encountered an unexpected identifier in the syntax

I'm encountering an issue with my web application. The error keeps popping up. app.get("/campground/:id/comments/new",function(req,res){ camp.findById(req.params.id)({ if(err) console.log(err); else ...

javascriptnode.js

Angular 2 issue with nested form elements

Looking to build a form that includes nested sub/child components within it. Referring to this tutorial: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 https://plnkr.co/edit/clTbNP7MHBbBbrUp20vr?p=info List of modificatio ...

javascriptangularjsformsangularcomponents

Having trouble getting SCSS styles to render properly in your vue.js project?

I am currently developing a vue.js web application and I want to utilize SCSS for styling purposes. I have installed npm i node-sass sass-loader and have created a vue.config.js at the root level. Here is what I have set up in the configuration file: modul ...

cssvue.jssass

JavaScript can be used to append multiple array values within double brackets in Spring MVC

I am currently developing an application using Spring MVC with MongoDB. In the collection, I have retrieved multiple image name values: Ex: 1.jpg, 2.jpg, 3.jpg.... My Query: Now I need to place these values inside double brackets [[]] Ex : [["1.jpg"," ...

javascriptarraysmongodbspring-mvcmultidimensional-array

What is the best way to include arrays in VueJS?

Currently, I am working with two arrays in my Vue application. The first array called desserts lists all the desserts that I have. The second array, moreDesserts, displays checkboxes with values. When a user selects a checkbox, the value is added to the se ...

javascriptarraysvue.jsvuexvuetify.js

Switching to a dropdown navigation option

Sorry for the repetition, but I haven't been able to find a solution to my problem yet, so here I am asking again. I am still getting the hang of html5 and css3, and while I've managed so far, I'm stuck now. I want to turn one of the option ...

htmlcssdrop-down-menu