Changer le texte sur le vol stationnaire ne fonctionne pas

Question

J'ai un bouton pour sélectionner des images, son état par défaut est "Sélectionner une image", après qu'une image est sélectionnée, le innerHTML du bouton est changé pour le nom de fichier. Maintenant, ce que je veux faire, c'est que si je passe la souris sur le bouton alors qu'il ne dit pas "Sélectionner l'image", je veux qu'il dise "Sélectionnez une image différente", puis sur "Je veux revenir à ce que c'était avant (le nom de fichier de l'image).

J'ai rassemblé les éléments suivants, mais cela ne fonctionne pas ... Je suis ouvert aux options JS et jQuery.

window.addEventListener('load', function(event) { 
    var btn = document.getElementById('file-button'); 
    if (btn.innerHTML !== "Select Image") { 
     var temp = btn.innerHTML; 
     btn.onmouseover = btn.innerHTML = "Select a different image"; 
     btn.onmouseout = btn.innerHTML = temp; 
    } 
}); 

SOLUTION - grâce à Ian

window.addEventListener('load', function(event) { 
    var btn = document.getElementById('file-button'); 
    btn.onmouseover = function() { 
     if (this.innerHTML !== "Select Image") { 
      var temp = this.innerHTML; 
      this.innerHTML = "Select a different image"; 
     } 
    }; 

    btn.onmouseout = function() { 
     if (this.innerHTML !== "Select Image") { 
      this.innerHTML = temp; 
     } 
    }; 
}); 

Answer 1

Essayez ceci:

window.addEventListener('load', function(event) { 
    var btn = document.getElementById('file-button'); 
    if (btn.innerHTML !== "Select Image") { 
     var temp = btn.innerHTML; 
     btn.onmouseover = function() { 
      this.innerHTML = "Select a different image"; 
     }; 

     btn.onmouseout = function() { 
      this.innerHTML = temp; 
     }; 
    } 
}); 

Vous devez définir les propriétés .onmouseover et .onmouseout comme fonctions. Ensuite, vous pouvez aussi bien référencer le bouton avec this, au lieu de btn.

MISE À JOUR:

Je pense que vous voulez réorganiser votre logique à quelque chose comme ceci:

window.addEventListener('load', function(event) { 
    var btn = document.getElementById('file-button'); 
    var temp = btn.innerHTML; 
    btn.onmouseover = function() { 
     if (this.innerHTML !== "Select Image") { 
      temp = this.innerHTML; 
      this.innerHTML = "Select a different image"; 
     } 
    }; 

    btn.onmouseout = function() { 
     if (this.innerHTML !== "Select Image") { 
      this.innerHTML = temp; 
     } 
    }; 
}); 

http://jsfiddle.net/3WkXp/

Answer 2

Puisque vous utilisez jQuery, il peut être écrit comme

$(function(){ 
    var temp = $('#file-button').html(); 
    if (temp !== "Select Image") { 
     $('#file-button').hover(function(){ 
      $(this).html('Select a different image') 
     },function(){ 
      $(this).html(temp) 
     }); 
    } 
}) 

D emo: Fiddle

Answer 3

essayez celui-ci

vous êtes réellement obligatoire l'événement auditeurs seulement quand le code html de BTN == Select Image

var temp; 
$("#file-button").mouseover(function() { 
    if ($(this).html() !== "Select Image") 
    { 
     temp = $(this).html(); 
     $(this).html("Select a different Image"); 
    } 
}).mouseout(function() { 
    if ($(this).html() === "Select a different Image") 
     $(this).html(temp); 
});