Getting an Error I do not understand

At the home page of a site I am working on, I am getting a JS Error pertaining to this snip of code:

var search = document.getElementById('search'),
    query = search.elements.q;
query.onfocus = function () {
    if (this.value === this.defaultValue) {
        this.value = '';
    }
}
query.onblur = function () {
    if (this.value === '') {
        this.value = 'Enter Product Name or Keyword';
    }
}

var search = document.getElementById('searchfooter'),
    query = search.elements.q;
query.onfocus = function () {
    if (this.value === this.defaultValue) {
        this.value = '';
    }
}
query.onblur = function () {
    if (this.value === '') {
        this.value = 'Enter Product Name or Keyword';
    }
}

The error says Search is Null with the following highlighted

query = search.elements.q;

What do I need to do to fix this so the error does not show in IE or FF?

IE does not show a pop up but a little icon that says, done, but with errors on page.

Thanks for any help or advice on this,

paul

Thanks again PMW57,

I actually did something different to make it work. Not sure if it is a solution but it seemed to get rid of the errors.

I originally had the header search script in the same .js file as the bottom footer script, so what I did was separated the two of them into two separate .js files and that seems to make it work with no errors.

I am not sure how that fixed the issue but I no longer get the errors anymore.

Thanks for the explanation and help with this,

Paul

At the time a script is run, all the page content that occurs after the script does not yet exist. If you try to do getElementById it will only be able to find ones that exist before the script.

There are two solutions to this. The first is to delay the execution of the script until after the document has loaded, and the second solution is to put the script at the bottom of the page, which also helps to improve the site performance.

PMW51

The script is in an INCLUDE towards the top of the page and it is calling a script called search.js.

what do you mean by moving the script to the bottom?

Would it matter that they are being called inside includes?

Just trying to think this out at bit and why I would get that error because both elements are on every page otherwise the function would not work at all.

Thanks Jesse,

When you say Element in the Page do yo mean it could not find the element searchfooter?

The script is not in the head of the document, it is in an include from that page.

Basically, the include is calling a Search Box that is on this page.

Would it help if I showed you the form itself?[/quote]

It would help if you let us know where the include occurs on the page, in reference to the two forms.

It would also help if a demo page was put up on the internet, so that we can look for other potential issues, such as multiple identical id names, or conflicting id/name relationships.

The solution to help resolve such an issue is to move the script to the bottom of the page, which also helps to improve how fast the page appears to be loading.

See: Best Practices for Speeding up your Web Site specifically - [url=“http://developer.yahoo.com/performance/rules.html#js_bottom”]Put Scripts At Bottom

If you’re loading the javascript inside the head, then it will execute before the elements are in the page and ready

document.getElementById(‘searchfooter’) is returning null because it could not find the element in the page.