смоделировать, чтобы изменить цвет фона при нажатии на ссылку

Question

У меня есть следующий HTML-код и java-скрипт ниже, чтобы имитировать изменение цвета фона при нажатии на блок ссылок, но он, похоже, не работает. Любая причина почему?

Если обработать только событие onmousedown, цвет фона наверняка изменится на синий. Но если обрабатываются как onmousedown, так и onmouseup, то визуально ничего не изменится.

<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

В дополнение к советам Sarfraz (style.backgrounColor против style.background) вам не нужно экранировать кавычки для вызова функции в ваших событиях:

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

Либо одинарные кавычки, либо двойные. Опять же, не нужно избегать цитаты (\ ").

Answer 2

Попробуйте это:

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