Error: Property 'onclick' cannot be set on a null object

JavaScript isn't my strong suit, so I'm struggling to solve this issue. The console is showing me the following error message:

Uncaught TypeError: Cannot set property 'onclick' of null

    <script>

    var modal = document.getElementById('modal');

    var btn = document.getElementById("modalbtn");

    var 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";}
}

    </script>

Answer №1

I have finally solved the issue. The reason for the error was that the element I was trying to access is not available on the current page.

Thank you.

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

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: To achieve the d ...

Dynamic v-if condition based on data binding

Is it possible to bind a v-if directive to data? I have an array of objects that represent navigation links or buttons, such as login and logout. Each object in this array has a 'v-if' property where the condition is defined as a string. Sample ...

Breaking down numerous requests into chunks in JavaScript: A step-by-step guide

I am facing a situation where I have multiple requests to make, but they cannot all be called simultaneously. Therefore, I came up with a solution to split the set of requests into chunks of 10. I'm curious about how I can handle making these 10 reque ...

Having trouble retrieving json data from PHP page using jQuery $.ajax

Having trouble accessing this JSON data in JavaScript, as when I try to alert it the result comes back as undefined Below is the jQuery code snippet: $.ajax({ type: "POST", url: "frmMktHelpGridd.php", data: { labNo: secondElement ...

Unable to find the Popper component in Material UI

Material-UI version "@material-ui/core": "^3.7.0" I have a requirement to display Popper on hover over an element, but unfortunately, the Popper is not visible. This section serves as a container for the Popper component. import PropTypes from &apos ...

Are you searching for the origin of a dynamic dropdown widget or database?

Currently, I am browsing through and I have a query regarding accessing all available classes/options for the courses in a semester. There is a class locator on the top left of the page with a dynamic drop-down menu. Can anyone suggest how I can access ...

Error: The object does not contain the specified method

After deploying a web app to a remote host, I encountered an unusual error. Uncaught TypeError: Object #<error> has no method 'endsWith' Key Information: The application functions perfectly on my local machine as the host. The error ari ...

Using an External JavaScript Library in TypeScript and Angular 4: A Comprehensive Guide

My current project involves implementing Google Login and Jquery in Typescript. I have ensured that the necessary files are included in the project: jquery.min and the import of Google using <script defer src="https://apis.google.com/js/platform.js"> ...

What could be the reason behind a CSS caption overlapping another image within this table?

This is the CSS caption effect I am using: .cell { position: relative; width: 180px; height: 180px; } .caption {} .cell .caption { opacity: 0; text-decoration-color: gray; text-align: center; background: #eaeaea; position: absolute; fo ...

Display the second dropdown after the user has made a selection in the first dropdown

Recently, I've been delving into the world of html/javascript and navigating through the process of implementing the code found in this specific link. While I can see the solution outlined in the link provided below, I'm struggling with how to i ...

Efficient Techniques to Eliminate Unwanted Jumping in CSS Transitions

I am currently working on a unique "stack" component that is inspired by the amazing ElastiStack. You can check out a cool demo of my work here. The demo works flawlessly on desktop Chrome, but unfortunately, I have encountered some issues with the transit ...

Make sure to remain in the same division area when refreshing the page

Whenever I click the next button and move to step 2, I want the page to stay on the same div even after reloading. The two divs used are join_form_1 and join_form_2 Currently, when I reload the page, it reverts back to the first div. Is there a way to e ...

The principle of event delegation in jQuery

Are event handlers delegated across both <div> tags? In other words, is there one or two event handlers being used? I'm looking to extract the data-id from the event.delegateTarget. It's straightforward when attached to each of the <div& ...

Evaluating string combinations in JavaScript using valid comparisons

After choosing values on the screen, two variables store their value. var uval = '100'; var eval = '5'; There are 2 combinations with values: let combination1= 'u:100;e:1,4,5,10' let combination2 = 'u:1000;e:120,400,500, ...

Script for converting Fixed Positioned Elements to Static

I am frequently finding that elements on web pages are causing disruptions due to their fixed positioning. I am exploring ways to disable the position: fixed CSS rules on any website I visit. To address this issue, I have developed a userscript specifical ...

What is the method for reaching a service in a different feature module?

Currently, I am utilizing Angular 2/4 and have organized my code into feature modules. For instance, I have a Building Module and a Client Module. https://i.stack.imgur.com/LvmkU.png The same structure applies to my Client Feature Module as well. Now, i ...

Title: "Customizing Labels on Stack Bars and Lines in D3.js Visualization"

Currently working on a stacked bar chart with a line chart on dual axis using D3.js and facing difficulty aligning labels correctly. Check out the code I have experimented with so far: https://plnkr.co/edit/doobXBC5hgzvGwDLvArF?p=preview I am looking to ...

Using AngularJS to manipulate the DOM after the view has completely loaded

Sorry for the lengthy explanation - I hope it doesn't deter too many readers. While my current setup is functional, I'm unsure if it's the most optimal way to go about things. Therefore, I'm seeking some guidance. I have a webpage wher ...

Incorporating additional ES6 modules during the development process

As I build a React component, I find that it relies on an ES6 component that I'm currently developing. Since I created the latter first, what is the typical method to include it during development as I work on the second component? If the dependency w ...

NodeJS and ExpressJS fail to redirect to the main landing page

I am currently developing a shopping cart application using nodejs/expressjs. I have encountered an issue with redirecting back to the homepage ('/') after the user submits their credentials during sign up. Despite my search for relevant articles ...