SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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
    ********
    Regards,

    P

  2. #2
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.getElementById('searchfooter') is returning null because it could not find the element in the page.

  3. #3
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jesse,

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

    P

  4. #4
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ********
    Regards,

    P

  5. #5
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're loading the javascript inside the head, then it will execute before the elements are in the page and ready

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JesseDPate View Post
    If you're loading the javascript inside the head, then it will execute before the elements are in the page and ready
    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 - Put Scripts At Bottom
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ********
    Regards,

    P

  8. #8
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    ********
    Regards,

    P

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ********
    Regards,

    P


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •