Simple JavaScript ne fonctionne pas

Question

Quelqu'un peut-il me dire ce que je fais mal? Je suis un débutant à JavaScript, donc je ne suis pas habitué à déboguer du code pour le moment.

Merci

Luke

Answer 1

Au lieu de window.onload = initForm essayer window.onload = function() {/ la fonction init/} Aussi, quand une fonction se référant à vous devez utiliser() même s'il n'y a pas d'arguments.

Answer 2

Le problème est que lorsque fieldSelect et fieldDeselect OBTIENNENT appelés, this fait référence à l'objet window, et non à l'élément qui a déclenché l'événement. Vous voudrez peut-être envisager d'utiliser 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 prend soin de faire en sorte que lorsque vos gestionnaires d'événements sont appelés se, this fait référence à l'élément qui a déclenché l'événement.

Answer 3

Votre problème réside dans l'association de vos gestionnaires d'événements. Vous devez lier à onfocus et onblur (notez le nom de l'événement en minuscule).

Comme suggestion, vous pouvez regarder un simple navigateur croix addEvent() avec une ligne rapide de code ajouté pour assurer le pointeur this approprié:

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"); 
    } 
} 

Et puis utilisez la fonction addEvent au lieu de allTags[i].onfocus = vous aurez probablement un meilleur kilométrage dans les futurs événements de liaison.

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

jsfiddle demonstration

Answer 4

Deux choses, les événements doivent être minuscules (onfocus, onblur) et this ne pointe pas à l'objet qui a déclenché l'événement dans IE. Essayez ceci:

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')"; 
} 

Les navigateurs conformes aux normes passeront un objet événement au gestionnaire d'événements. IE utilise un objet global window.event à la place. De toute façon, vous pouvez utiliser cet objet pour obtenir la cible de l'événement qui a déclenché le gestionnaire.

Une autre option, probablement préférable, consisterait à définir vos fonctions et à supprimer un className au lieu de modifier directement le style. Ensuite, mettez un style appelé selected dans votre feuille de style qui remplace l'image d'arrière-plan. De cette façon, vous gardez les informations de style et le comportement séparés.