Simple JavaScript not working

Question

Can somebody tell me what I am doing wrong?

window.onload = initForm;
function initForm() {
    var allTags = document.getElementsByTagName("*");
    for(i=0; i<allTags.length; i++) {
        if (allTags[i].className.indexOf("textbox") > -1) {
            allTags[i].onFocus = fieldSelect;
            allTags[i].onBlur = fieldDeSelect;          
        }
    }
}
function fieldSelect() {
    this.style.backgroundImage = "url('inputBackSelected.png')";
}

function fieldDeSelect() {
    this.style.backgroundImage = "url('inputBack.png')";
}

I am a beginner at JavaScript so I am not used to debugging code yet.

Thanks

Luke

Answer 1

Instead of window.onload=initform try window.onload=function(){/the init function/} Also when refering to a function you should use () even if there are no arguments.

Answer 2

The problem is that when fieldSelect and fieldDeselect are getting called, this refers to the window object, not to the element that fired the event. You might want to consider using jQuery:

$(document).ready(function() {
    $('.textbox').focus(fieldSelect).blur(fieldDeselect);
});

function fieldSelect() {
    $(this).css('background-image', 'url("inputBackSelected.png")');
}

function fieldDeselect() {
    $(this).css('background-image', 'url("inputBack.png")');
}

jQuery takes care of making sure that when your event handlers are getting called, this refers to the element that fired the event.

Answer 3

Your problem lies in attaching your event handlers. You should bind to onfocus and onblur (note the lowercase event name).

As a suggestion, you may want to look at a very simple cross browser addEvent() with a quick line of code added to ensure the proper this pointer:

function addEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.attachEvent){
    // fix added by me to handle the `this` issue
    var r = obj.attachEvent("on"+evType, function(){ 
      retrun fn.apply(obj, arguments); 
    });
    return r;
  } else {
    alert("Handler could not be attached");
  }
} 

And then use the addEvent function instead of allTags[i].onfocus = you will probably have better mileage in the future binding events.

addEvent(allTags[i], 'focus', fieldSelect);
addEvent(allTags[i], 'blur', fieldDeSelect);

jsfiddle demonstration

Answer 4

Two things, the events should be all lower case (onfocus, onblur) and this doesn't point to the object that triggered the event in IE. Try this:

function fieldSelect(e) {
    var event;
    if(!e) {
        event = window.event;
    } else {
        event = e;
    }
    event.target.style.backgroundImage = "url('inputBackSelected.png')"; 
} 

function fieldDeSelect(e) {
    var event;
    if(!e) {
        event = window.event;
    } else {
        event = e;
    }
    event.target.style.backgroundImage = "url('inputBack.png')"; 
} 

Standards complient browsers will pass an event object to the event handler. IE uses a global window.event object instead. Either way you can use that object to get the target of the event that triggered the handler.

Another, probably preferable option would be to have your functions set and remove a className instead of directly changing the style. Then put a style called maybe selected in your stylesheet that overrides the background image. That way you keep style info and behavior separate.