JavaScript Not Working in Internet Explorer

Question

I'm currently styling my username/password inputs on a webpage. They are working as intended in Firefox/Safari, but Internet Explorer throws the following error:

Line: 7, Char: 2, Objected required

It happens when I give focus to my inputs. This function is called onfocus:

function InputFocused(InputID)
{
    var InputObject = document.getElementById(InputID);
    DefaultValue = InputObject.value;
    InputObject.value = "";
    InputObject.style.color = "#000";
}

And this is the markup:

<input type="text" class="login" id="username" value="USERNAME" onfocus="InputFocused(this.id)" onblur="InputBlurred(this.id)" />

I thought this was pretty straightforward, but I have extremely little experience with JavaScript, so any insight would be appreciated.

Answer 1

I think this

<input type="text" class="login" "id="username" value="USERNAME" onfocus="InputFocused(this.id)" onblur="InputBlurred(this.id)" />

would need to be this

<input type="text" class="login" id="username" value="USERNAME" onfocus="InputFocused('username')" onblur="InputBlurred('username')" />

for the example given.

Answer 2

You might want to add a sanity check by alerting the value of InputID. There's a problem with your html ("id= instead of id=) but that might just be the result of a quick copy/paste.

Also: I notice that you're passing in the value of the id attribute and then looking up the element instead of just passing a reference to the element directly.

Answer 3

Hey lush,

What version of IE are you using?

The problem, I expect, is that when you're specifying onfocus="InputFocused(this.id)" I'm not sure IE knows what it's current context is and as a guess I'd say its because the DOM has not finished being built.

By way of a solution and explanation you can acheieve what you are trying to do like this:

HTML:

<input type="text" class="login" id="username" value="USERNAME"/>

Then in your javascript you can specify and set your event handlers:

JAVASCRIPT:

       //get the element...
    var txtUsrNm =  document.getElementById('username');

    //specify the event handler for focus
    txtUsrNm.onfocus = function(){
      this.value = "";
      this.style.color = "#000";
    }

//specify the event handler for blur
    txtUsrNm.onblur = function(){
      this.style.color = "#f00";
    }

I've left out your DefaultValue bit as I wasn't fully aware of what you were trying to do with it. I haven't tested the code so sorry if it's not working. you can improve it all by wrapping in a function etc but thats probably a bit off topic.

Answer 4

I think that your best bet would be to do this

   function InputFocused(DOM_OBJECT)
    {
        DefaultValue = DOM_OBJECT.value;
        DOM_OBJECT.value = "";
        DOM_OBJECT.style.color = "#000";
    }

While your HTML would look like this:

<input type="text" class="login" "id="username" value="USERNAME" onfocus="InputFocused(this)" onblur="InputBlurred(this)" />

This will pass the complete DOM object, rather than just passing the id.

I hope this helps!