Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem with a listener in my code. Here's what I have:

$(document).ready(function() {

  document.getElementByClass(".call-to-action").addEventListener("click", openModal());

});

function openModal() {
  $("html").addClass("modal-open");
}

This is how my CSS looks like:

.modal-open
  .modal
    opacity: 1
    pointer-events: all

Any insights or suggestions would be greatly appreciated!

javascriptjqueryhtmlcss

Answer №1

Here is a helpful tip for you, enjoy!

If you're utilizing Jquery:

$(document).ready(function() {

  $(".call-to-action").on("click", openModal);

});

function openModal() {
  $("html").addClass("modal-open");
}
html.modal-open{
  
  background: #ddd;
  
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <input class="call-to-action" type="button" value="CTA"/>
  </body>

If you are working with javascript:

document.getElementsByClassName("call-to-action")[0].addEventListener("click", openModal);



function openModal() {
  document.documentElement.classList.add("modal-open");
}
html.modal-open {
  background: #ddd;
}
<body>
  <input class="call-to-action" type="button" value="CTA" />
</body>

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

Unable to modify src using .attr() on an ng-repeat and ng-click combination is not functioning as expected

I have a collection of pictures (pins) displayed using ng-repeat. One of the requirements is that when a colored pin is clicked, it should turn grey, and vice versa. Here's how my ng-repeat is set up: ng-repeat="note in vm.myData.contactHistoryConta ...

jqueryangularjs

Error: Identifier Not Expected (Exploring Generators in ES6)

After delving into the information provided in the generators documentation on MDN, I devised a straightforward experiment: var nodes = { type: 'root', value: [ { type: 'char', value: 'a' }, { type: &ap ...

javascriptnode.jsgeneratoryieldecmascript-harmony

When the HTML content matches a specific value, initiate a click event to trigger

Can anyone help me troubleshoot? I've tried multiple methods but can't seem to get it right. Here's a breakdown of what I'm attempting to accomplish: #info-NUMBER-btn shows Click to display more information. #info-NUMBER CSS is set t ...

javascriptjqueryhtmlcss

How can VueJS dynamically incorporate form components within a nested v-for loop?

I've encountered a challenge while working on my project. Here is the form I'm currently using: Upon clicking the 'New Deal Section' button, a new section like this one is created: My goal is to add multiple text boxes in each sectio ...

javascriptvue.js

The JSON.stringify function encounters difficulties when trying to format an object into

Why does JSON.stringify refuse to format objects and keep everything on a single line? <!DOCTYPE html> <html> <head> <script> var obj = { "a" : "1547645674576457645", "b" : "2790780987908790879087908790879087098", "c" ...

javascriptjsonstringify

Encountering TypeScript errors with React-Apollo when using GraphQL to pass props to a higher order component

I've encountered some challenges while attempting to link a React class component with my local Apollo cache data. Following the guidelines outlined here, I have run into issues where VSCode and Webpack are generating errors when I try to access data ...

javascripttypescriptgraphqlreact-apollo

Looking to set up a server that can manage SQL queries and serve HTML web pages efficiently

In my databasing course, I have the task of setting up a functional remote database. While I am confident in my ability to manage the database itself, I lack knowledge regarding web servers. My objectives include: - Creating a website where users can sel ...

htmlsql-serverwebserver

Enhance your Vue app by dynamically modifying classes with Tailwind

I am working on a Vue3 application that utilizes Tailwinds configured in the tailwind.config.js file. My question is, can I dynamically modify the value of a preconfigured class from the tailwind.config.js file? For instance: tailwind.config.js: const d ...

cssvue.jstailwind-css

Struggles with embedding a table within a form while working with jQuery Mobile

Currently facing a problem trying to embed an HTML table inside a form in a jQuery Mobile environment. An error message pops up: Uncaught TypeError: Cannot read property 'not' of undefined The Chrome debugger points to this line in jquery.mobil ...

htmlformsjquery-mobilehtml-table

Issue with Restangular/angularjs object not refreshing after remove() operation

I am currently using Restangular within my AngularJS application. I have an index view that displays all messages, and I can edit and add messages to the list without any issues. However, when I attempt to use the remove() function on an element, the index ...

javascriptangularjsrestangular

Learn how to dynamically disable a button based on the input state matching an email pattern!

I'm facing an issue with my login form that has 2 input fields and a login button. One of the input fields requires a valid email pattern. If any of the input fields are left empty, the login button becomes disabled. However, when an incorrect email p ...

javascripthtmlangularjsangulartypescript

Experiencing difficulties connecting with aspx while using Ext JS 4.2

Currently, I am facing an issue with making a call to an ASPX URL as the return keeps coming back as a failure. I have successfully used this URL in previous programming projects, but this is my first time utilizing it with Ext JS. Despite researching dif ...

javascriptasp.net.netcssextjs

What is the best way to integrate a button within a datatable cell to display additional details in a popup window?

I am seeking help with datatable.js. I would like to insert a button inside the cells of the datatable columns to expand and display the detailed content of each cell. When I click on the red button, a popup modal should appear showing the full list of con ...

javascriptjquerycssdatatabledatatables-1.10

Access view name in controller using Ui-Router

Utilizing the ui-router in AngularJS allows for the implementation of multiple views within the same page/state. While each view consists of a template, controller, and more, there appears to be no straightforward method of assigning a "resolve" function ...

javascriptangularjsangular-ui-router

Steps for configuring type definitions for an Apollo error response

Apollo's documentation explains that an error response can take the following form: { "data": { "getInt": 12, "getString": null }, "errors": [ { "message": "Failed to get s ...

javascripttypescriptapollo

The function .then is not compatible with AngularJS

I have a service that is responsible for loading data. angular.module('App').service('daysService', ['$http','$q',function($http,$q) { var days = []; return { loadDay: function() { ...

javascriptangularjs

I am having trouble scrolling through the main content when the side-drawer is open. How can I fix this issue?

When the sidebar is opened, I am facing issues with the main content scroll and certain fields such as select options and search bar not functioning properly. I have included the main content in the routes from which it is being loaded. However, the scroll ...

javascripthtmlcssreactjsmaterial-ui

Submitting a Form with JQuery Ajax and Receiving a Response

Currently, I am using Jquery Ajax to post a form and here is the code snippet: $( document ).ready(function() { //callback handler for form submit $("#myform").submit(function(e) { var postData = $(this).serializeArray(); var formURL = $(this).attr("act ...

jqueryajax

Retrieving text content from a file using React

I've been experiencing difficulties with my fetch function and its usage. Although I can retrieve data from the data state, it is returning a full string instead of an array that I can map. After spending a few hours tinkering with it, I just can&apos ...

javascriptreactjsnode.jstypescript

What is the best way to make a table fill 100% of the available height

Is this a Repetitive Question? How to stretch an HTML table to 100% of the browser window height? Just like the title says, I am looking for a way to make my table element stretch to 100% height even when the content does not entirely fill the page&ap ...

htmlcss