We Keep Coding

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
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
Thanks for your time

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
document.querySelector('NonExistentElement').innerHTML = "Won't show up";
This is why you need to check for null before trying to use it
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>

Only Internet Explorer gives error : 'document.getElementById(...)' is null or not an object

I working on asp project but when I run this project on internet explorer 8 then it gives following error:
'document.getElementById(...)' is null or not an object
if (obj == 18){
var name18=document.getElementById("infomsg-18");
if (name18 != null)
{
name18.style.display='none';
}
}
}
else
{
//line:285
document.getElementById('infomsg_rmsg').innerHTML = 'Info:...'+xmlhttp.status;
//document.getElementById('Divajax').innerHTML = xmlhttp.statusText;
}
}
xmlhttp.open("GET","/Reset_ModifFlagSession.asp",false);
xmlhttp.send();

As Passerby said there is no element with id "infomsg_rmsg" so you can't access the innerHTML property of a null object. If it really does exist (check your source code to confirm) then the reason is probably because you are calling this inline (<script>...</script>) BEFORE the DOM has finished loading. Try calling the same function from an onload handler and see if it gets detected.
Also I suspect your HTML is probably broken so before you do anything make sure your HTML validates.
Finally, on SO you'll get better answers if you write better questions. There is too much missing HTML / script in your question to do anything but guess.

"query function not defined for Select2 undefined error"

Trying to use Select2 and getting this error on multiple item input/text field:
"query function not defined for Select2 undefined error"

Covered in this google group thread
The problem was because of the extra div that was being added by the select2. Select2 had added new div with class "select2-container form-select" to wrap the select created. So the next time i loaded the function, the error was being thrown as select2 was being attached to the div element. I changed my selector...
Prefix select2 css identifier with specific tag name "select":
$('select.form-select').select2();

This error message is too general. One of its other possible sources is that you're trying to call select2() method on already "select2ed" input.

In case you initialize an empty input do this:
$(".yourelement").select2({
data: {
id: "",
text: ""
}
});
Read the first comment below, it explains why and when you should use the code in my answer.

I also had this problem make sure that you don't initialize the select2 twice.

For me this issue boiled down to setting the correct data-ui-select2 attribute:
<input type="text" data-ui-select2="select2Options.projectManagers" placeholder="Project Manager" ng-model="selectedProjectManager">
$scope.projectManagers = {
data: [] //Must have data property
}
$scope.selectedProjectManager = {};
If I take off the data property on $scope.projectManagers I get this error.

This issue boiled down to how I was building my select2 select box. In one javascript file I had...
$(function(){
$(".select2").select2();
});
And in another js file an override...
$(function(){
var employerStateSelector =
$("#registration_employer_state").select2("destroy");
employerStateSelector.select2({
placeholder: 'Select a State...'
});
});
Moving the second override into a window load event resolved the issue.
$( window ).load(function() {
var employerStateSelector =
$("#registration_employer_state").select2("destroy");
employerStateSelector.select2({
placeholder: 'Select a State...'
});
});
This issue blossomed inside a Rails application

I also got the same error when using ajax with a textbox then i solve it by remove class select2 of textbox and setup select2 by id like:
$(function(){
$("#input-select2").select2();
});

It seems that your selector returns an undefined element (Therefore undefined error is returned)
In case the element really exists, you are calling select2 on an input element without supplying anything to select2, where it should fetch the data from. Typically, one calls .select2({data: [{id:"firstid", text:"firsttext"}]).

Also got the same error when using ajax.
If you're using ajax to render forms with select2, the input_html class must be different from those NOT rendered using ajax. Not quite sure why it works this way though.

if (typeof(opts.query) !== "function") {
throw "query function not defined for Select2 " + opts.element.attr("id");
}
This is thrown becase query does not exist in options. Internally there is a check maintained which requires either of the following for parameters
ajax
tags
data
query
So you just need to provide one of these 4 options to select2 and it should work as expected.

I got the same error. I have been using select2-3.5.2
This was my code which had error
$('#carstatus-select').select2().val([1,2])
Below code fixed the issue.
$('#carstatus-select').val([1,2]);

I have a complicated Web App and I couldn't figure out exactly why this error was being thrown. It was causing the JavaScript to abort when thrown.
In select2.js I changed:
if (typeof(opts.query) !== "function") {
throw "query function not defined for Select2 " + opts.element.attr("id");
}
to:
if (typeof(opts.query) !== "function") {
console.error("query function not defined for Select2 " + opts.element.attr("id"));
}
Now everything seems to work properly but it is still logging in error in case I want to try and figure out what exactly in my code is causing the error. But for now this is a good enough fix for me.

use of globalstorage is deprecated. please use localstorage instead

I got this message when doing some javascript programming, and after some google searches, I have no idea what it means, or how i cause this error. I'm including the code below, can someone explain it to me or point me to a resource on how to fix it or what is happening at all? The weird thing is that I have other code just like this part in my program, and it never gives me errors about them, so i'm really confused. Also, I only get this error to display with firebug running, else wise it just doesn't work and no error message is displayed. I also tried it in Chrome, and had the same issues, no error message but the code doesn't work.
foundTextFn = function(){
console.log('fire');
if (foundTextArrayPosition != foundTextArray.length){
writeText(foundTextArray[foundTextArrayPosition],"happy");
foundTextArrayPosition += 1;
}
foundTextFnTimer=setTimeout("foundTextFn()",4000);
}
Here is another of my methods, it is basically the same thing, but it works fine. And if it matters, all of these variables are global variables declared at the start of my file as var foundTextArrayPosition = 0; for example.
awayFn = function(){
if (awayArrayPosition != awayArray.length){
if (changeAwayState){
changeAwayState = false;
writeText(awayArray[awayArrayPosition],"normal");
awayArrayPosition ++;
temp = pickRandomSpot();
randomX = temp[0];
randomY = temp[1];
}
else{
changeAwayState = true;
}
awayTimer=setTimeout("awayFn()",10000);
}
else{
abandoned = true;
whyGoneArrayPosition = 0;
whyGoneFn();
}
}

This is a deprecation error in Firefox 9. globalstorage was a way to store data in Firefox, but HTML5 introduced localstorage, which is now the preferred way (using window.localStorage).
https://developer.mozilla.org/en/DOM/Storage has more information.

I got the same error message and found a solution and perhaps the underlying cause of conflict, I was using the jQuery validate function in the jzaefferer.github.com/jquery-validation/jquery.validate.js library along with jQuery 1.7.1
The problem:
I used $(document).ready with two different contexts. One with the noConflict wrapper and one without. By keeping both the same, the error message went away. Hooray!
The wrapper:
jQuery.noConflict();
jQuery(function($) {
$(function() {
$(document).ready(function() { ...}
});
});
See also this post on my blog.

Probably not related to the issue above but I will put it here for the search engines.
I got the same error message while doing some simple jQuery:
Use of globalStorage is deprecated. Please use localStorage instead.
[Break On This Error]
$(document).ready(function() {
It was however due to forgetting to actually include the link href to the jQuery.js file...!

javascript error: Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object

I am getting this error when I call a javascript function to display a modal window:
Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object
The code block is:
else if (action=="officeview") {
document.getElementById("OfficeContent").src="ChangeView.aspx";
ShowFeatureModal('AppView','OfficeContent')
The object is this situation, does exist.
Error is caused at: document.getElementById line.
What else could be causing the error?
Update:
Index.aspx is calling the javascript function which is located in sysUtilities.js file. The source file is yet a seperate page (ChangeView.aspx)

If document.getElementById doesn't find the element, it will return null. If you then try to get the src property from null, you'll get this error.
You'll either need to ensure the there's an element with its ID equal to OfficeContent or do something like the following:
else if (action=="officeview") {
var officeContent = document.getElementById("OfficeContent")
if (officeContent) {
officeContent.src="ChangeView.aspx";
ShowFeatureModal('AppView','OfficeContent')
}
}
EDIT: If you're using ASP.NET, which it appears that you are, remember that your IDs might be getting name-mangled if they are inside a container control. In that case, you have to make sure to use the ClientID, not the plain old ID. Something like this:
document.getElementById("<%= OfficeContent.ClientID %>")

Don't know if it will help in this case, but this is a trick to prevent the error:
(document.getElementById("OfficeContent")||{}).src="ChangeView.aspx";
If the element doesn't exist, an empty object gets the src-property, no error is thrown, no harm is done.
It may be wise though to look for the cause of document.getElementById("OfficeContent") returning null.

you need test whether an element exists first before setting element's src attribute
var el = document.getElementById("OfficeContent");
el && (el.src="ChangeView.aspx");

All this stuff is peripheral to the main issue, which is:
You must use the actual clientID of "OfficeContent", which may be quite different in the HTML DOM of the page as it is rendered. One easy way to avoid this would look something like this:
var officeContent = document.getElementById("<%=OfficeContent.ClientID %>")