The Javascript function is malfunctioning, unable to assign the 'onclick' property to null

Here's the code snippet I'm working with:

var exit = document.getElementById("exit");
exit.onclick = function() {
   "use strict";
    document.getElementById("fadedDiv").style.display = "none" ; 
};

However, when I check the console, it shows me this error message:

script.js:107 Uncaught TypeError: Cannot set property 'onclick' of null

This code used to work fine for me before, but now I'm not sure what went wrong.

Any assistance would be greatly appreciated. Thank you!

Answer №1

Since you assigned the parent Div a class name of "fadedDiv" in your HTML, you should then access it using

document.getElementById("fadedDiv")

To fix this issue, update the parent div tag to have an id instead

<div id="fadedDiv">
      This is a div
      <div id="exit" >&#10005; text</div>
</div>

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

Interacting with Vue3 List Items by Manipulating the HTML DOM

I am currently using Vue 3 and I have a requirement to manipulate a specific list item when a button is clicked. Below is the HTML code snippet: <socialDiv v-for="(follower, i) in followerList" :key="follower.id" :ref="el => ...

Preventing an iframe from reloading when transferring it to a new parent using appendChild

I'm looking to relocate an iframe to a different parent element while maintaining the iframe's current state (including scroll position and any entered form data). Unfortunately, when I use appendChild() to move the iframe, it reloads and resets ...

Utilizing JSX interpolation for translation in React JS with i18next

I am trying to utilize a JSX object within the interpolation object of the i18next translate method. Here is an example code snippet along with its result: import React from "react"; import {useTranslation} from "react-i18next&qu ...

Encountering an error while using $state.go function in Angular JS testing

Below is the code snippet for a Controller in Angular JS: describe('Controller: homeCtrl', function () { beforeEach(module('incident')); var homeCtrl, $state; beforeEach(inject(function ($controller, _$state_) { $state = _ ...

How can I remove the focus highlight from the MUI DatePicker while retaining it for the TextField?

I am currently working on developing a date picker using react.js with the MUI DatePicker library. The code I have implemented closely resembles what is provided in their documentation. However, upon rendering the component, I am encountering an issue whe ...

Submitting forms that contain files using jQuery and AJAX

Despite searching through numerous questions on this topic, I have yet to find a solution to my specific issue. My objective is to successfully submit an entire form, potentially containing files as well. The code I currently have is not working: $(target ...

Guide on transferring control from a successful jQuery event to an HTML form

I am currently using the following jQuery code to validate user details. $.ajax({ type: "POST", url: "Login", data:'uname='+encodeURIComponent(uname)+'&'+'pass='+encodeURIComponent(pass), ...

Using Python Webdriver to Execute JavaScript File and Passing Arguments to Functions

How can I execute a JavaScript function and pass arguments to it? value = driver.execute_script(open("path/file.js").read()) I have successfully executed the file, but I am unsure of how to pass arguments to the function within it. Any suggestions would ...

Is Angular's Http Module classified as middleware?

As I delve into the world of middleware, I've encountered a bit of a challenge trying to fully grasp its concept. Currently, I'm exploring the ExpressJS documentation and its explanation of a middleware function: "Middleware functions are functi ...

How to include an href in a button using Pug without disrupting a form

Is there a way to create a button that redirects to my /leaderboard page once my quiz app submits? h1 Play Time 4 Trivia! button Go form(method='POST') ul each val in questions li ...

How can PHP be used to decode JSON and transmit it to Javascript?

I am aiming to utilize the Twitter API in order to dynamically populate slides on a webpage with recent tweets without needing to refresh the entire page. Currently, my approach involves making an AJAX call every few seconds from a JavaScript function on ...

Excessive notification events are currently causing a blockage in the Angular app

Currently, I am utilizing Angular 7 in combination with SignalR on the backend for push notifications. At certain times, an overwhelming amount of notifications flood in, causing my application to become completely unresponsive. The SignalR service compon ...

Should you hold off on moving forward until the asynchronous task finishes?

My goal is to retrieve location coordinates using the Google Maps JavaScript API in an asynchronous manner. Below is the function I've created for this purpose: function fetchCoordinates(address) { var geocoder = new google.maps.Geocoder(); ...

Tips for updating the background color when clicking in Vue

I've been attempting to change the background color of an element upon clicking it using Vue, but so far I haven't had any success. Here's what I have come up with, including a method that has two functions for the onclick event in Vue. &l ...

Managing cookies with ReactJs: A guide to setting, storing, and updating cookies without deleting the existing ones

How can I create a cookie that stores input values when the user submits a form, and updates the cookie without removing previously saved data on subsequent submissions? export default function saveToCookie() { const [ name, setName ] = useState('&a ...

Adding array elements to a JavaScript object

I find myself in a rather unique predicament that I'm struggling to navigate. I have come across some data structured as follows. Please bear with me if I use any incorrect terminology, as I am relatively new to this. usersByName: { "tester&q ...

JavaScript - Validation Tool for Bootstrap

Currently utilizing a plugin called Plugin Link Attempting to validate whether at least one checkbox from a group has been selected. Unfortunately, the plugin does not offer this feature. After some research, came across a discussion by the plugin author ...

A sophisticated approach to implementing a search functionality within a complex JSON structure containing nested arrays using JavaScript

Searching for data in JSON format: { "results": { "key1": [ { "step": "step1", "result": "pass" } , { "step": "step2", "result": "pending" } ...

The @click directive in vuex does not function properly within the Vue component

This content is from my online shop. getters: { getFormattedUsers (state) { state.users.forEach(v => { v.fullname = `${capitalize(v.fname)} ${capitalize(v.lname)}` v.created_from_now = moment(v.created_at).fromNow() v.approve_but ...

It is not possible to retrieve a cookie via a request

Currently, I am in the process of setting up an Express JS server that uses cookies. This is my first time incorporating cookies into a project :) Upon user login, I send cookies to them using the following code: res.cookie('pseudo', list[i].ps ...