Javascript working in Firefox but not in IE -

Question

I have this

authnav='<li class="last"><a href="auth/login">login</a></li>'+
  '<li><a href="auth/create_account">create account</a></li>';

It works fine in Firefox, but Internet Explorer gives me an "Error: Object doesn't support this property or method" I'm mystified - what could be going on here?

There's a comment line above the offending line, could that possibly be making a difference?

//authnav='<li class="last"><a href="auth/login">login</a></li>';

Check out the page yourself at http://www.imagineelection.com . I want two little links, "login" and "create account", to appear on the top right of the page.

Thanks!

Answer 1

The problem arises in this function as IE allows you to reference document.getElementById("authnav") as authnav and then gets upset when you assign it a string. Maybe declaring a local variable explicitly with var authnav will work or is it intended to be a global variable?

function add_auth_nav() {
    name = get_cookie("name");
    candidate = get_cookie("candidate");
    if (name) {
        authnav = '<li class="last"><a href="auth/logout">logout</a></li>';
        if (candidate) {
            authnav = authnav + '<li><a href="edit/candidate/' + candidate + '">edit profile</a></li><li><a href="profile/' + candidate + '">view profile</a></li>'
        }
        authnav = authnav + "<li>" + name.replace(/\+/g, " ") + "</li>"
    } else {
        authnav = '<li class="last"><a href="auth/login">login</a></li><li><a href="auth/create_account">create account</a></li>'
    }
    document.getElementById("authnav").innerHTML = authnav
}

Answer 2

Results reproduced. Can you substitute the ie_scripts.min.js file with the original and check if it still fails...