Kevin Powell - Community•2y ago

Why is it showing null?

Uncaught TypeError: Cannot read properties of null (reading 'innerText') Getting this error, heres the codepen: https://codepen.io/Dhami2009/pen/zYMwpxQ it happens on line 90, when you open the little code icon on top-right, clicking onto section button,after that some prompts come and the error comes on the third prompt. the code is in a if statement like this:

if (subCtgName) {
        subCtgTitle.innerText = subCtgName;
      }

if (subCtgName) {
        subCtgTitle.innerText = subCtgName;
      }

the if statements detects something in the subCtgName, then only it will exexute it, then why does it say null after that, the if gets executed but it outputs as null, whyyyyy? (idk what i am saying)

Sehajdeep Singh Dhami

CodePen

Help

...

3 Replies

vince•2y ago

Have you tried doing

if (subCtgName && subCtgTitle) { ... }

if (subCtgName && subCtgTitle) { ... }

Jochem•2y ago

to expand on that, that error happens when the variable before .innerText is null. In this case, sectionSubCtgTempCopy.querySelector('.section-text-title'); is probably not finding an element with that class on it, which in turn means sectionSubCtgTemp.content is either still empty when the function is called, or doesn't contain that class. which, looking at your code:

            <div class="section-text-container dropdown">
                <h2 class="section-text-title"></h2>
                <p class="section-text-text"></p>                
            </div> 
        </div>  
    </template>
    <template class="section-title-container-temp" >
        <div class="section-title-container dropdown"><h1 class="section-title"></h1></div>
            <div class="section-text-container dropdown">
                <h2 class="text-title"></h2>                
            </div> 
    </template>

            <div class="section-text-container dropdown">
                <h2 class="section-text-title"></h2>
                <p class="section-text-text"></p>                
            </div> 
        </div>  
    </template>
    <template class="section-title-container-temp" >
        <div class="section-title-container dropdown"><h1 class="section-title"></h1></div>
            <div class="section-text-container dropdown">
                <h2 class="text-title"></h2>                
            </div> 
    </template>

that template is the one being put into sectionSubCtgTemp, and it doesn't have an element with .section-text-title on it, only that h2 that has text-title so the base answer, is that you made a typo in the class name

_.s3haj._OP•2y ago

The title just doesn't appear then, the oif doesn't get executed Hmm, it was a typo and now it works!

Gaming

Programming

Why is it showing null?