Javascript works on 1st page but not the second

After several years of using Jquery I have decided to learn at least basic Javascript. I have run into what is to me a strange problem.

If I have a script like this that runs on page 1, but do not have the same class's on page 2, all scripts stop running that come after this script.

var numberOfClasses = document.querySelectorAll("li.line");
document.querySelector("p.classes").innerHTML = 'Number of support Links ' + numberOfClasses.length;


If I do not have the "p.classes" on the second page, nothing in the JavaScript file that comes after code that will run. Is this normal? The code is in a JS file that is included at the bottom of the html file on both pages. The code above is for example only

"p.classes"

The error message on the second page is TypeError: document.getElementById(...) is null, which refers to the first bit of code in the JS file that is not present on the 2nd page

document.getElementById(...) is null

Thanks for your time

innerHTML

if(document.querySelector("p.classes") != null) ...

1 Answer
1

jQuery silently "fails" for these situations. If it doesn't find a selector it just returns an empty jQuery object that you can still call methods from, though they wont do anything.

Example

jQuery('NonExistentElement').html("won't show up")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
No error will be thrown.

Native DOM methods like querySelector() don't return an empty object that you can still access methods from. They will either return the element, a list of elements (NodeList,HTMLCollection, etc) or null. Thus if you try to access a property on a return value from one of these you have a potential for failure in the case of a null return

querySelector()

document.querySelector('NonExistentElement').innerHTML = "Won't show up";

This is why you need to check for null before trying to use it

null

var element = document.querySelector('p.classes');
if(element != null)
element.innerHTML = "your html";

var element2 = document.querySelector('p.classes2');
if(element2 != null)
element2.innerHTML = "no error as the if statement fails and so this code wont execute";


<p class="classes"></p>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.