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