javascript - Cannot read property 'getElementsByClassName' of null

I'm clearly a total beginner. I have 2 html pages that both call the same JavaScript file. The functionality of the JS is to hide certain list items from an unordered list. One of the pages does not have the class that is being called (that div does not exist on the page), so I'm assuming when the JS sees that that particular element is not there, it's throwing the null error, which makes sense to me. Is there a way, using an "if" statement perhaps, that I can fix this? In other words, if this html element is not there, do this anyway?

<script>
function opNotices() {

    var list = document.getElementById("op-notices-1").getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[0].style.display = "none";
    list.getElementsByTagName("li")[1].style.display = "none";

    var list = document.getElementById("op-notices-2").getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[2].style.display = "none";
    list.getElementsByTagName("li")[3].style.display = "none";
}

opNotices();
</script>

<html>
 <div id="op-notices-2"><!--#include virtual="content.html" --> 
      </div>
    </html>

content.html is:

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>

Output is:

But I want c and d hidden.

<script>
function opNotices() {

    var list = document.getElementById("op-notices-1").getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[0].style.display = "none";
    list.getElementsByTagName("li")[1].style.display = "none";

    var list = document.getElementById("op-notices-2").getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[2].style.display = "none";
    list.getElementsByTagName("li")[3].style.display = "none";
}

opNotices();
</script>

<html>
 <div id="op-notices-2"><!--#include virtual="content.html" --> 
      </div>
    </html>

content.html is:

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>

Output is:

But I want c and d hidden.

Share Improve this question edited May 25, 2020 at 19:18 asked May 25, 2020 at 18:44 Espskully 1071 gold badge2 silver badges10 bronze badges

You need to show the code, expected output and the error – Imanpal Singh Commented May 25, 2020 at 18:45
The result of getElementsByClassName will have a .length that will be > 0 if results are found – Taplar Commented May 25, 2020 at 18:46
Simple question; when the something you are expecting is null, is this an error (you did something wrong) or an expected situation (it is correct that the thing does not exist). In the case of document.getElementsByClassName, its possible your code has a mistake. – speciesUnknown Commented May 25, 2020 at 18:50
1 It's expected behavior, as the "op-notices-1" is not on this page - but it exists on the other page that also calls this JS. So everything works fine on the page with both op-notices-1 and op-notices-2 on it, but when op-notices-1 isn't on the page, I get the null error, which I understand. But I want the JS to function regardless of whether or not that div is on the page. – Espskully Commented May 25, 2020 at 19:21

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

The "Cannot read property 'getElementsByClassName' of null" error does not mean that the classname is missing - it means that the thing that you are trying to run 'getElementsByClassName' against does not exist. In other words, your code doesn't get far enough to even try searching for elements by class name.

Specifically, when your code gets to a line like this:

var list = document.getElementById("op-notices-1").getElementsByClassName("content")[0];

it performs the following steps:

Get whatever value is stored in the variable name document. Since you haven't set it to anything else, it will get back the HTML document, as you expect.
Take the value gotten in step 1, and look for a property called getElementById. This step only works if the value from step 1 is an object (i.e. a set of properties like { foo: 1; bar: "2" }). Since document is an object, this works just fine, and gets back the function named getElementById.
Call the value gotten in step 2 with the arguments ("op-notices-1"). This only works if the value from step 2 is a function. Since it is, it calls the function, and returns the result of null (since there isn't an HTML element with the ID #op-notices-1).
Take the value gotten in step 3, and look for a property called getElementsByClassName. This only works if the value from step 3 is an object, like in step 2. Since it isn't (it's null), it throws this exception and stops everything - nothing further in this entire script runs at all.

So, to solve your issue, you need to check for null between steps 3 and 4. If you insert that step, your code for dealing with "op-notices-1" would now look something like this:

var opNotices1 = document.getElementById("op-notices-1");
if (opNotices1 !== null) {
    var list = opNotices1.getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[0].style.display = "none";
    list.getElementsByTagName("li")[1].style.display = "none";
}

which simply says "If there is no 'op-notices-1', skip the rest of that bit." (Note that it doesn't make sense to "force it anyway", because getElementById("op-notices-1") returning null means that there simply isn't any list to do filtering on).

if the class is not present, getElementsByClassName will return null. So you can write an if statement checking the return value of getElementsByClassName

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Cannot read property 'getElementsByClassName' of null - can I force it using an "if&qu

2 Answers 2

与本文相关的文章

评论列表(0)