Oops! Looks like we have encountered an issue with reading the property 'checked' of nothing

Whenever I click the checkbox, an image should be displayed. Unfortunately, I encountered an error:

Uncaught TypeError: Cannot read property 'checked' of null
at (index):185
at dispatch (VM576 jquery.min.js:3)
at i (VM576 jquery.min.js:3)

Could you please guide me on how to resolve this issue? I have included my code below.

http://jsfiddle.net/xda0kL6w/1/

if (document.getElementById('checkIDGrid').checked) {
  alert("I am checked for the grid");

  var img = $('<img />', {
    id: 'Myid',
    src: 'https://thumbs.dreamstime.com/z/pixel-perfect-web-development-flat-icons-set-website-programming-process-webpage-coding-user-interface-creating-45297890.jpg',
    alt: 'MyAlt'
  });
  img.appendTo($('<tr>'));

} else {
  alert("I am not checked for the grid");
}
javascriptjqueryhtmlcssangular

Answer №1

Here is an example:

let checkbox = document.getElementById('checkIDGrid');
if (checkbox !== null && checkbox.checked) {
    // Do something
}

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

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropc ...

csscss-selectors

What is the best way to load the route calculation dynamically?

I am struggling with calculating the Google Maps route dynamically. The console shows an error stating that 'calcularRuta' is not defined: Uncaught ReferenceError: calcularRuta is not defined at HTMLInputElement.onclick (index.html:1) Despi ...

javascriptjqueryajaxgoogle-mapsgoogle-maps-api-3

Is it possible for me to transition to working with Angular 8 after mastering Angular 4?

After mastering Angular 4, I'm interested in knowing the key distinctions between it and Angular 8. What new concepts or features do I need to familiarize myself with beyond what I already know from Angular 4? Thank you for your help. ...

angular

Filtering out specific properties in an array using Angular

I am facing an issue with my Angular filter when inputting text for a specific list. initialViewModel.users = [ {user: 'Nithin',phone: 'Azus', price: 13000}, {user: 'Saritha',phone: 'MotoG1',price: 12000}, {user: ...

javascriptangularjsangularjs-ng-repeatangular-filters

Obtain characteristics of the primary element in Ionic version 2 or 3

After creating and opening my Sqlite database and saving the SQLiteObject in a variable within my app.component.ts, I now need to retrieve these attributes in my custom ORM. The ORM extends to other providers to describe the title and field of my tables. ...

angulartypescriptionic-framework

Loading pages dynamically with jQuery's AJAX functionality

$("#page").ajaxStart(function(){ $("#loading").show(); }); $('#page').load('target.html', function() { $("#loading").hide(); } I currently use this AJAX method to load my target page, however, it only loads scripts and not all ...

jqueryajax

"Troubleshooting the lack of functionality in nested ajax calls, click events, or event

Initially, a navigation click event was created: $('#inner-navigation li a') .on('click', function (e) { e.preventDefault(); AjaxNavUrl.checkURL(this.hash); }); This event triggers an ajax call and respo ...

javascriptjqueryajax

Retrieve the data contained within a displayed embed tag that includes a src attribute

Can anyone provide guidance on how to retrieve the content of an embed tag using src attribute? I have an embed tag pointing to a custom page as src. I tried to use jquery to access the rendered content but I am not getting anything back. Any suggestions ...

javascriptjqueryhtml

Is ReactJS known for its exceptional performance in rendering large matrices?

Although I have no prior experience with ReactJS, I've heard about a great feature it offers called virtual DOM. It reminds me of the concept of virtual elements in Silverlight where invisible elements are removed from the tree to enhance user-perceiv ...

javascriptreactjsdomd3.js

Exploring the distinction between absolute elements nested within other absolute elements and relative elements nested within absolute elements

My latest CSS experiment involved creating a flag of a country. Check out my code: div.flag { width: 900px; height: 600px; background-color: red; position: relative; } div.flag > div { position: absolut ...

htmlcssweb

Troubleshooting connection timeouts between node.js and amqp

In my project, I am utilizing RabbitMQ through the AMQP module in Node.js with 2 producers and 2 consumers. Here is the code snippet for establishing connections for the consumers: function init_consumers( ) { console.log( 'mq: consumers connect ...

javascriptnode.jsrabbitmqamqp

Exploring end-to-end testing with NestJS and Guards

I'm trying to test an endpoint called /users using nestjs, but I encountered some errors. I'm unsure how to fix the issues and make the test pass with a guard. First Issue Nest is unable to resolve dependencies of the UserModel (?). Please en ...

javascriptnode.jstypescriptjestjsnestjs

console rendering duplication in React

Why am I seeing duplicate log entries in the console? While working on another project, I noticed that the number of HTML elements being added using jQuery was twice as much as expected (specifically while building a notification framework). To investigate ...

javascriptreactjsrender

Uncertainty arises from the information transmitted from the controller to the Ajax function

In one of my coffee scripts, I have an AJAX call that calls a method in a controller. The AJAX call is structured like this: auto = -> $.ajax url : '<method_name>' type : 'POST' data : <variable_name> ...

javascriptjqueryruby-on-railsajaxcoffeescript

Vue.js 2 view failing to update after modifying data in Vuex state

Greetings, I am currently working on developing a table to monitor the validation status of multiple items. Below is the VueX store configuration: mutations: { ..., set_scaninfos: function (state, scaninfos) { Vue.set(state, 'scaninfos&a ...

javascriptvue.jsvuejs2storevuex

The blur() function does not function properly on IOS devices such as iPad and iPhone

I've attempted using blur() to change the CSS, but it seems that this function is not effective. After researching, I discovered that blur() does not work on IOS devices. Is there an alternative method for removing the position from .body-clip-overflo ...

javascriptcss

Inserting additional information and assigning a category following a prosperous AJAX request accompanied by output from php echo

I'm currently working on implementing an AJAX call to my PHP file to send an email once a contact form is submitted. Initially, I had everything functioning properly where the response from PHP was displayed in a div above the form. However, I wanted ...

javascriptphpjqueryajax

Upgrading Angular from Version 9 to Version 10

Currently facing an issue while attempting to upgrade Angular from version 9 to 10. Despite manually updating the package.json file as below, I am encountering this error message: "@angular/core": "^10.2.5", "@angular/common": ...

angular

How to reveal hidden Div element at a specific index with Angular Material table

In my mat-table, there are several functionalities available: 1. The ability to add or remove rows 2. Adding data into a row using different controls such as combo-boxes, text boxes, etc. One of the controls is a text box labeled "Additional Information ...

htmlangulartypescriptangular-material

Child component in Angular fails to detect input changes

Hey there! I'm currently utilizing parent-child communication in my Angular project. In the parent component, I have an array that represents graph data. If you'd like to check out a demo of what I'm working on, feel free to click here. The ...

javascriptangularhighcharts