simulate to change the background color when click the link

Question

I have the following HTML and the java script below to simulate the background color change when the link block is clicked, but it doesn't seem to work. Any reason why?

If I have only the onmousedown event handled, the background color will be changed to blue for sure. But if both onmousedown and onmouseup are handled, nothing would change visually.

<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

Try this:

<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

In addition to what Sarfraz advised (style.backgrounColor vs style.background), you don't need to escape the quotes for the function call in your events:

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

Either user single quotes or double quotes. Again, no need to escape the quote (\").