simuler pour changer la couleur d'arrière-plan lorsque vous cliquez sur le lien

Question

J'ai le HTML suivant et le script java ci-dessous pour simuler le changement de couleur d'arrière-plan lorsque le bloc de lien est cliqué, mais cela ne semble pas fonctionner. Une raison pour laquelle?

Si je ne gère que l'événement onmousedown, la couleur d'arrière-plan sera définitivement définie en bleu. Mais si onmousedown et onmouseup sont manipulés, rien ne changerait visuellement.

<div class='Button'><a href='mylink' onmousedown=\"changeColorOnMouseDown();\" onmouseup=\"changeColorOnMouseUp();\"><span id='note'>note...</span></a></div> 


function changeColorOnMouseDown() 
{ 
    document.getElementById('note').style.background='blue'; 
} 

function changeColorOnMouseUp() 
{ 
    document.getElementById('note').style.background='#d8dde7'; 
} 

Answer 1

Essayez ceci:

<div class="Button"><a href="#" onMouseDown="changeColorOnMouseDown();" onMouseUp="changeColorOnMouseUp();"><span id="note">note...</span></a></div> 


function changeColorOnMouseDown() 
{ 
    document.getElementById('note').style.backgroundColor = 'blue'; 
} 

function changeColorOnMouseUp() 
{ 
    document.getElementById('note').style.backgroundColor = '#d8dde7'; 
} 

Answer 2

En plus de ce Sarfraz conseillé (style.backgrounColor vs style.background), vous n'avez pas besoin d'échapper aux citations pour l'appel de fonction dans vos événements:

<a href='mylink' onmousedown="changeColorOnMouseDown();" onmouseup="changeColorOnMouseUp();"> 

Des guillemets simples ou doubles entre guillemets. Encore une fois, pas besoin d'échapper à la citation (\ ").