Simulate changing background color when clicking a link

Question

I have the following HTML and java script below to simulate a background color change when I click on a link block, but it does not seem to work. Any reason why?

If I only have an onmousedown event, the background color will change to blue. But if both onmousedown and onmouseup are handled, nothing will 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 the following:

<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 advises (style.backgrounColor vs style.background), you don't need to hide quotation marks to call the function in your events:

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

, . , (\ ").