Javascript нажмите кнопку + показать

Question

У меня есть большая красная кнопка, и я пытаюсь использовать JavaScript для выполнения следующих действий: -

1. OnMouseDown изменить изображение, чтобы кнопка выглядела нажатой
2. OnMouseUp вернуться к исходному изображению и показать скрытый div

Я могу получить часть изменений изображения onMouse Down и onMouseUp, чтобы работать.

Я также могу получить скрытый div, чтобы показать с помощью OnClick

Проблема в том, что я не могу заставить все это работать вместе.

Как мне это сделать?

Кстати, я уверен, что это очевидно, но я довольно новичок в JavaScript, поэтому я ценю вашу помощь

Answer 1

Вы можете использовать точки с запятой для разделения нескольких операторов сценария в событии:

<img src="..." alt="..."
  onmousedown="depressed();"
  onmouseup="undepressed(); revealDiv();" />

Кроме того, я считаю, что большинство браузеров поддерживают событие onclick:

<img src="..." alt="..."
  onmousedown="depressed();"
  onmouseup="undepressed();"
  onclick="revealDiv();" />

Поскольку вы сказали, что вы уже разобрались с каждой из трех частей в отдельности, я просто написал вызовы функций, которые вы можете заменить своим собственным кодом для каждого шага.

Answer 2

Трудно сказать, не видя ваш код, но я подозреваю, что пропущенное "верните истину"; оператор в конце обработчиков событий onclick или onmouseup.

Answer 3

Никогда не рекомендуется прикреплять события к элементам с помощью нотации атрибутов непосредственно к тегу html-элемента.

Намного лучше отделить представление (являющееся визуализированным html) от контроллера (происходящие действия)

Лучший способ прикрепить событие:

<img id="abut" />

<script>
var thebutton = document.getElementById('abut'); //Retrieve the button from the page 
thebutton.onmousedown = depressed; //depressed is a function that you declare earlier on...here, you are just passing a reference to it
thebutton.onmouseup = function () {
    undepressed();
    revealDiv(); //Invoke the two functions when the 'onmouseup' is triggered'
};
</script>