1

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.

1
  • Please post the code you are using to wire onfocus to this function. Aug 12, 2009 at 22:22

4 Answers 4

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!

3
  • While it does help make the code more concise, it doesn't solve the problem I'm having. Thanks for the tip though, I have implemented the suggestion. Aug 13, 2009 at 16:29
  • It did, in fact, fix the IE problem, I just forgot to clear cache before checking the page again. Thanks. Any idea why passing this.id would throw the error, but passing the object reference was no issue? Aug 13, 2009 at 16:46
  • I'm not sure why. I've played with your code and have both versions working. Aug 13, 2009 at 19:47
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.

1
  • The first point was in fact just my pasting error. And I am now passing reference instead of ID, I see how it makes things more concise. Thanks. Aug 13, 2009 at 16:43
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.

3
  • I was under the impression that both were exactly the same. Are they not? Besides the misplaced ". Aug 13, 2009 at 16:11
  • Misplaced quotes can cause significant screw-ups. Always use a validator.
    – Quentin
    Aug 13, 2009 at 16:16
  • The misplaced quote wasn't in my actual code, just in the snippet I pasted here. My question was regarding this versus 'username'. Aug 13, 2009 at 20:43
0

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.

1
  • I'm using IE7, and am now passing a reference to the object into my JS function instead of just ID, so it shouldn't be a context issue. Aug 13, 2009 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.