Properties of undefined (reading 'checked') Javscript- DojoToolkit

utility9213

 have been facing this issue for almost a week now. I can't seem to have my checked radio box to toggle between one another. By default, the radio button is set to checked for the "Allow Partial Download". I want to save the checked value so, I stored the key value pairs in the local storage for the Full Download when it is being toggled.

Upon rendering/refresh, the Full Download should be checked. However this does not work.. and instead I kept getting this error after retrieving the local storage key value pair. (Retrieving the key value pair works)

I have tried using [dojo/DomReady!] but it doesn't work. Placed everything into the render function. And also a few jQuery methods which also didn't work...

So basically I have been getting this error, but my DOM has already been rendered as I could access the element.

The _renderDownloads is binded to an onClick function and renders whenever the page loads.

TypeError: Cannot read properties of undefined (reading 'checked') 

 

HTML Code:

      <form class="g-item-title" style="color: #005e95">
        <input type="radio" id="checkboxPartialDownload" data-dojo-attach-event="onClick: _test" style="cursor: pointer;" name="downloadValue" value="partialDownload" checked>
        Allow Partial Download

        <br>

        <input type="radio" id="checkboxFullDownload" data-dojo-attach-event="onClick: _renderDownloads" style="cursor: pointer;" name="downloadValue" value="fullDownload" >
        Allow Partial + Full Download
      </form>

 

Function that is being rendered

  _renderDownloads: function(){

        //$('#partialDownload').attr('checked', false);
        //$('#fullDownload')[1].checked; Both these options doesn't work for either

        let title = this.item.title;
        let fileid = this.item.fileid

       if(localStorage.getItem(`${title} ID:${fileid}`) === "AllowFullDownload"){
        $('#partialDownload').prop('checked', false); //Doesn't work
        $('#fullDownload').prop('checked', true); // Doesn't work
       }

        var radioButtonValue = $("input[type='radio'][name='downloadValue']:checked").val(); 
        //console.log('First render'+ radioButtonValue)

        if(radioButtonValue ==="fullDownload"){
          localStorage.setItem(`${title} ID:${fileid}`,"AllowFullDownload")
        }

This is a snippet of the code where it is being rendered from. Also I do not know how to wrap this in a with ready, are there any other sample codes for this? As this code is slightly different from the documentation.

define(["dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/array",
    'dojo/Deferred',
    'dojo/promise/all',
    "dojo/string",
    "dojo/topic",
    "dojo/request",
    "dojo/request/xhr",
    "dojo/on",
    "app/context/app-topics",
    "dojo/dom-style",
    "dojo/dom-class",
    "dojo/dom-construct",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/Tooltip",
    "dijit/TooltipDialog",
    "dijit/focus",
    "dojo/dom",
    "dijit/popup",
    "dojo/text!./templates/ItemCard.html",
    "dojo/i18n!app/nls/resources",
    "dojo/parser",
    "dojo/ready",
    "dojo/domReady!"
  ],
  function (declare, lang, array, Deferred, all, string, topic, dojoRequest, xhr, on, appTopics, domStyle, domClass, domConstruct,
    _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Tooltip, TooltipDialog, focusUtil, dom, popup,
    template, i18n, parser, ready) {
    
    parser.parse()
    var oThisClass = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

      render: function (hit) {
        let radios = document.getElementsByName('downloadValue')
        console.log(hit)
        let dataTitle = hit.sort[0];
        let dataid = hit._source.fileid;

        if(localStorage.getItem(`${dataTitle} ID:${dataid}`) === "AllowFullDownload"){
          $('#partialDownload').prop('checked', false);
          $('#fullDownload').prop('checked', true);
         }
  
        if (AppContext.appUser.isSignedIn()) {
          this._renderDownloadDropdown(item,links)
        }
      },
    },