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

Using jQuery to dynamically add a value to a comment string

Is there a way to dynamically include tomorrow's start and end times in the message for the setupOrderingNotAvailable function if today's end time has passed? The current message states that online ordering will be available again tomorrow from 1 ...

javascriptjquery

The sanitizer variable becomes null when accessed outside of the NgOnInit function in Angular using TypeScript

At first, I added DomSanitizer to the component: import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; Next, a class was created and included in the constructor: export class BlocklyComponent implements OnInit { primar ...

angulartypescriptionic-frameworksanitizer

Enhancing web page interactivity through dynamic element names with Javascript and jQuery

I have an interesting HTML setup that looks like this: <div> <input type="text" name="array[a][b][0][foo]" /> <input type="text" name="array[a][b][0][bar]" /> <select name="array[0][a][b][baz]>...</select> </div> ...

phpjavascripthtmlarrayspost

Display more/hide less form using div elements in a NextJS project

Looking to create a hidden block of amenities on my hotel website that can be expanded and collapsed with buttons in NextJS using tailwind-css. How can I achieve this functionality? Example 1: https://i.stack.imgur.com/BbrUj.png Example-2: https://i.stac ...

javascriptreactjsnext.jstailwind-css

Informing the parent window of the child window's activities in order to adjust the timer for the user timeout feature

Within my Jquery function, I have implemented a feature that darkens the screen after a period of user inactivity. This triggers a pop-up window giving the user the option to stay logged in by clicking a button. If there is no response within the set time ...

javascriptasp.netjqueryiframeparent-child

Digital Repeater and Angle Measurer

Seeking Guidance: What is the recommended approach for locating the Virtual Repeaters in Protractor? A Closer Look: The Angular Material design incorporates a Virtual Repeater to enhance rendering performance by dynamically reusing visible rows in the v ...

javascriptangularjsseleniumprotractorangular-material

My Node.Js app refuses to run using my computer's IP address, yet works perfectly with localhost

My Node.js application is set up to listen on port 5050 of my machine: Visiting http://localhost:5050/myapp loads the app successfully. I am using the Express framework, so my listening framework looks like this: var server = app.listen(5050, '0.0.0 ...

javascriptnode.jsexpress

How can I use jQuery to access the parent node in an XML document?

I have been trying to extract the top-level 'label' attribute from the XML code below using jQuery, but I haven't had any luck so far. I have already converted it into a DOM object, but the results are not what I expected. Does anyone have a ...

javascriptjqueryxml

Vue: event triggers malfunctioning and components unresponsive

I am new to Vue.js and I'm attempting to trigger an event from my grand-child component (card) to the child component (hand) and then to the parent component (main): card (emit play event) => hand (listen for play event and emit card-play event) => ...

javascriptvue.js

Transferring Text from Word to Expression using Copy and Paste

Whenever I try to copy and paste content from a Word document into Expressions Web, I encounter some strange behavior. Often, the top line gets placed in one <span> tag while the rest ends up in another <span> tag, causing a slight gap between ...

htmlcssmicrosoft-expression-web

Is there a way to prevent an undefined legend from being automatically created in an ng 2 chart during the loading process?

While working with the ng-2 chart, I noticed that an undefined legend is automatically generated in the stacked bar chart with a color that I did not specify. I am using a specific set of colors defined in an array. Is there a way to remove only the undefi ...

angularchart.jsng2-charts

The error message "Cannot read property 'addEventListener' of undefined" occurred while trying to register the service worker using `navigator.serviceWorker.register('worker.js')`

I'm grappling with a JavaScript issue and need some help. You can find the demo of the functioning script by the author right here. I've implemented the same code as displayed on his demo page. I've downloaded the worker.js file and ...

javascript

The text color is being influenced by the transparent background behind it

I have a box with a transparent background color. Below is the CSS and HTML code that I'm using: CSS: #box { color: black; text-align: center; margin: 50px auto; background: blue; opacity: 0.1; border-radius: 11px; box-sh ...

htmlcsstransparencyopacity

What is the best way to save an integer in HTML's localStorage instead of a string?

I've encountered an issue while using the localStorage feature in a game I'm developing. Specifically, the money variable should be increasing by 1 every second. Here's a snippet of my code: var money = 0; window.onload = function () { ...

javascripthtmllocal-storage

How can I stop popup labels from appearing in MapBox GL JS when I don't want them to be visible?

Having created an application using MapBox GL JS, I have placed numerous markers all around the globe. As the mouse hovers over these markers, a description box pops up, which is what I intended. However, I am encountering an issue where these labels flick ...

javascriptmapbox-gl-jsnwjs

NodeJS refuses to import a file that is not compatible with its structure

My website has two important files: firebase.js gridsome-server.js The firebase.js file contains JavaScript code related to Firebase integration: import firebase from 'firebase/app' import 'firebase/firestore' const config = { ap ...

javascriptnode.jsvue.jswebpackcommonjs

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

javascripthtmlmodel-view-controllerhandlebars.js

Utilizing React JS to dynamically adjust the z-index upon clicking a component

My goal is to create a functionality where clicking on a box will move it to the top, with the previous box now underneath. For a better understanding, please refer to the following code snippet. https://codesandbox.io/s/optimistic-payne-4644yf?file=/src/ ...

javascriptreactjsdynamicfunctional-programming

Using asynchronous functions in React Native still generates a promise despite the presence of the 'await' keyword

After making an API call, my react-native component is supposed to return some SVG. Despite using an async function with await, the function still returns a promise that has not resolved yet. I have seen similar questions asked before, but I am puzzled as ...

javascriptreact-nativeasync-await

Arranging Div Elements in a Specific Layout

I am currently experimenting with http://jsfiddle.net/ngZdg/ My main goal is to create a parallax website, but I am facing some challenges with the initial layout. I am aiming for the following design: ------------------------------------- | ...

htmlcss