0

Getting following error Uncaught TypeError: Cannot read property 'classList' of null throws Can anyone help me on this

HTML:

<div class="slds-p-around_xx-large">
    <lightning-record-edit-form record-id={enrollmentId} object-api-name="Enrollmeent__c">
<div class="slds-vertical-tabs">
    <ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
        <li class="slds-vertical-tabs__nav-item slds-is-active" title="Family Name" role="presentation">
            <a class="slds-vertical-tabs__link" href="javascript:void(0)"  onclick={tabchange}  role="tab" tabindex="0"
                aria-selected="true" aria-controls="slds-vertical-tabs-0" id="slds-vertical-tabs-0__nav">
                <span class="slds-vertical-tabs__left-icon"></span>
                <span class="slds-truncate" title="Family Name">Family Name</span>
                <span class="slds-vertical-tabs__right-icon"></span>
            </a>
        </li>
        <li class="slds-vertical-tabs__nav-item" title="Tab 2" role="presentation">
            <a class="slds-vertical-tabs__link" href="javascript:void(0)" onclick={tabchange} role="tab" tabindex="-1"
                aria-selected="false" aria-controls="slds-vertical-tabs-1" id="slds-vertical-tabs-1__nav">
                <span class="slds-vertical-tabs__left-icon"></span>
                <span class="slds-truncate" title="Tab 2">Tab 2</span>
                <span class="slds-vertical-tabs__right-icon"></span>
            </a>
        </li>
        <li class="slds-vertical-tabs__nav-item" title="Tab 3 has a really long label and can wrap or truncate"
            role="presentation">
            <a class="slds-vertical-tabs__link" href="javascript:void(0)"  onclick={tabchange} role="tab" tabindex="-1"
                aria-selected="false" aria-controls="slds-vertical-tabs-2" id="slds-vertical-tabs-2__nav">
                <span class="slds-vertical-tabs__left-icon"></span>
                <span class="slds-truncate" title="Tab 3 has a really long label and can wrap or truncate">Tab 3  </span>
                <span class="slds-vertical-tabs__right-icon"></span>
            </a>
        </li>
    </ul>
    <div class="slds-vertical-tabs__content slds-show" id="slds-vertical-tabs-0" role="tabpanel"
        aria-labelledby="slds-vertical-tabs-0__nav">

            <template for:each={familyName} for:item="field" for:index="index">
                <div class={sectionLayout} key={field.fieldAPI}>
                    <lightning-input-field field-name={field.fieldAPI} required={field.required}>
                    </lightning-input-field>
                </div>
            </template>

    </div>
    <div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-1" role="tabpanel"
        aria-labelledby="slds-vertical-tabs-1__nav">
        <div class="slds-text-longform">
            <h3 class="slds-text-heading_medium">Tab Title</h3>
            <p>Content for Tab 2</p>
            <p>Lorem ipsum dolor...</p>
            <p>Lorem ipsum dolor...</p>
        </div>
    </div>
    <div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-2" role="tabpanel"
        aria-labelledby="slds-vertical-tabs-2__nav">
        <div class="slds-text-longform">
            <h3 class="slds-text-heading_medium">Tab Title</h3>
            <p>Content for Tab 3</p>
            <p>Lorem ipsum dolor...</p>
            <p>Lorem ipsum dolor...</p>
        </div>
    </div>
</div>

JS:

import { LightningElement, track } from "lwc";

 export default class Enrollment extends LightningElement {
@track enrollmentId;

 @track familyName = [
  {fieldAPI: 'Name', required:true },
  { fieldAPI:'Home_Phone__c', required:true}
 ];
tabchange(event) {
//document.getElementsByName("slds-vertical-tabs-1");
console.log("event target===>>" + event.target.id);
//console.log("current target===>>"+ event.currentTarget);

this.template.querySelector(".slds-show").classList.add("slds-hide");
this.template.querySelector(".slds-show").classList.remove("slds-show");

this.template
  .querySelector(".slds-is-active")
  .classList.remove("slds-is-active");

var y = event.target.parentElement;
console.log("y===>>" + y);

y.classList.add("slds-is-active");

var x = event.target.id;
console.log("x===>>" + x);
let target = this.template.querySelector(`[aria-labelledby="${x}"]`);
console.log("target===>>" + target);
target.classList.remove("slds-hide");
target.classList.add("slds-show");
}
}
  • 2
    We can't help you. We don't have enough information. What line does the error occur at? What did you do right when the error occurred? Have you tried any debugging? All I know for now is that you've got a null variable that you try to access classList from, which is one of any of the this.template.querySelector statements, but it's not immediately obvious which one is causing the issue, or why. You'll need to do some sleuthing on your own. – sfdcfox Feb 16 at 3:17
  • @sfdcfox Uncaught TypeError: Cannot read property 'classList' of null throws at testDEV-dev-ed--c.visualforce.com/auraFW/javascript/2a7dI3yJAq4Ks9x5yB5pfg/aura_prod.js:4:34395 – user3214361 Feb 16 at 3:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.