The attribute 'checked' is not a valid property for the 'TElement' type

  • Learning about typescript is new to me.

  • I have a functional prototype in fiddle, where there are no errors if I use this code. http://jsfiddle.net/61ufvtpj/2/

  • But in typescript, when I utilize this line - if(this.checked){ it presents an error [ts] Property 'checked' does not exist on type 'TElement'.

  • Could you guide me on how to resolve this so that I can handle it myself in the future?
  • I am including relevant code below and the complete code in the gist provided here:

https://gist.github.com/niniyzni/4faea080e53eb0c7155ddd8fb635a46c

 $(document).on('change', '#playerFlagCheck', function () {

            if(this.checked){ //[ts] Property 'checked' does not exist on type 'TElement'.
                $('#editIconplayer').addClass("gridUpdateIcon");
                alert("I am inside if");
            }else{
                alert("I am inside else");
                if(!$('#editIconplayer').hasClass("gridUpdateIcon")){
                    $('#editIconplayer').removeClass("gridUpdateIcon");
                }
            }

        });
javascriptjquerycssangulartypescript

Answer №1

Your event handler is creating a new context, learn more about it here. As a result, the reference to this no longer points to the controller itself.

To resolve this issue, try the following solution:

const vm = this;
$(document).on('change', '#playerFlagCheck', function () {
   if(vm.checked) {
     $('#editIconplayer').addClass("gridUpdateIcon");
       alert("I am inside if");
     } else {
       alert("I am inside else");
       if(!$('#editIconplayer').hasClass("gridUpdateIcon")) {
         $('#editIconplayer').removeClass("gridUpdateIcon");
       }
     }

});

Answer №2

Give it a shot. It's recommended to utilize prop or attr as well.

 $(document).on('change', '#playerFlagCheck', function () {
       if($(this).is(':checked')) {
         $('#editIconplayer').addClass("gridUpdateIcon");
           alert("Executing code within the 'if' statement");
         } else {
           alert("Executing code within the 'else' statement");
           if(!$('#editIconplayer').hasClass("gridUpdateIcon")) {
             $('#editIconplayer').removeClass("gridUpdateIcon");
           }
         }

});

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

developing a dynamic structure that can store multiple levels of data

I am grappling with the task of creating a multidimensional array in JavaScript to send data via an Ajax call to PHP. My expertise in JS is limited, especially when it comes to this particular task... I have shared the code on JSFiddle The desired struct ...

javascriptajaxarraysobjectmultidimensional-array

Leveraging Observables in an Angular 2 component to broadcast data to multiple components

Is it possible to utilize Observables in components and which other components can subscribe to them? BugListComponent - The component is injected in the boot.ts file where all services are loaded (where bootstrap is located) import {Subject, BehaviorSub ...

asynchronousangularreactive-programmingobservable

Trouble with the fetch request on the express root router when trying to connect with React

I am facing an issue while attempting to call the root router ('/') of Express using fetch API in React in production mode but it seems to be not working as expected. In my setup, I am utilizing a common server for serving static React views and ...

javascriptnode.jsreactjsexpressopenshift

The newly added radio button does not function as a separate group as expected

I currently have a set of radio buttons: <input type="radio" class='form-control' name="progress_type[]" value="Journal Papers"><span class='radio-label'>Journal Paper</span> <input type="radio" class='form-co ...

javascriptjqueryhtmlradio-button

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

javascripthtmlcssarrayslinux

Identifying the issue of body.onload not being triggered

My web pages use body.onload (or window.onload) to properly set up, but sometimes the onload event is not being triggered. Is there a way in a specific web browser (preferably Chrome, where this issue seems more common) to identify what is causing the pag ...

javascripthtmldom

Is there a way to remove text from a div when the div width is reduced to 0?

Upon loading the page, my menu is initially set to a width of 0px. When an icon is clicked, a jQuery script smoothly animates the menu's width to fill the entire viewport, displaying all menu items (links) perfectly. The issue I'm facing is that ...

javascriptjqueryhtmlcss

Switch up the webpage's font using a dropdown selection box

I'm interested in adding a drop-down box to my webpage that allows users to change the font of the site when they click on it. I attempted the code below, but it didn't seem to work. Any suggestions? Regards, Sam CSS .font1 p { font-family: " ...

htmlcssangularjs

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

javascriptjqueryhtmlcss

What is the most efficient way to align a localStorage variable with its corresponding page?

In my current project, I have developed a component that is utilized in an online science lab setting. To ensure continuity for researchers who navigate away from the page and return later, I have integrated the use of localStorage. The goal is to preserv ...

javascriptreactjsreact-hookslocal-storagetinymce

Learn how to display two rows of div elements within a single div container

In my program, I am using a for loop to display multiple div elements in one row. The first div is showing up correctly, but I am having trouble inserting a new div that looks the same as the first one. How can I achieve this? Thank you in advance. "first ...

phphtmlcss

No errors found in Angular Reactive Forms FormGroup

When working with Reactive Forms, a formGroup containing invalid FormControls appears as invalid without any errors specified. Even though the form is invalid, accessing formGroup.errors returns null. Each invalid formControl does provide validation error ...

angular

Could it be that the TypeScript definitions for MongoDB are not functioning properly?

Hello everyone, I'm facing an issue with getting MongoDB to work in my Angular 4 project. In my code, I have the db object as a client of the MongoClient class: MongoClient.connect('mongodb://localhost:27017/test', (err, client) => { ...

angularmongodbtypescript

The error message: "Trying to access property 'get' of an undefined object"

$http.get('/contactList'). success(function(data){ console.log('received data from http get'); }). error(function(data) { $scope.error = true; $scope.data = data; return 'error message'; }); There seems to be ...

javascriptangularjstypeerror

Typescript error encountered in customized PipeLine class

I am currently developing a web scraping application using Puppeteer. In this project, I aim to create a PipeLine class that will take the current instance of the page and expose an add method. This add method should accept an array of functions with the t ...

node.jstypescriptpuppeteerpipelinetypescript-generics

Arranging information extracted from an XML document following an ajax request

Here is a snippet of XML data sample to work with: <?xml version="1.0" encoding="ISO-8859-1"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>U ...

javascriptajaxsorting

When a JavaScript click event is triggered, IE8 can reset certain margins to zero

I am experiencing an issue with 3 divs containing content that becomes visible when clicking on 3 buttons. You can see a demonstration of the problem here: At times, when I click one of the buttons, the layout seems to be disrupted as shown here: It appe ...

javascriptjqueryhtmlcss

Is the unavailability of nodejs's require function in this closure when using the debugger console due to a potential v8 optimization?

I am facing an issue with using the require function in node-inspector. I copied some code from node-inspector and tried to use require in the debugger console to access a module for debugging purposes, but it is showing as not defined. Can someone help me ...

javascriptnode.jsclosuresv8

Change numbers into a comma-separated style containing two decimal points using javascript

I have been working on a JavaScript function to convert numbers into a comma-separated format with two decimal places: Here is my current code snippet: Number(parseFloat(n).toFixed(2)).toLocaleString('en'); The issue with this code is that it ...

javascriptnumber-formatting

Discover the complete compilation of CSS class regulations (derived from various stylesheets) along with their currently active properties for the chosen element

Is there a way to retrieve all the matched CSS Selectors for a selected element and access the properties of each active class applied to that element? I have researched methods like using getMatchedCSSRules and checking out However, I am hesitant to use ...

javascriptjqueryhtmlcss