| | | | | |

Onclick в javascript примеры

2018/05/09 Марат 1267 0 JS | JS_EVENTS |

На onclick можно повесить вообще любое событие, какое только можно придумать! В качестве примера рекомендую - как сделать калькулятор - все события производится именно кнопками, на которых повешено событие onclick.

И самое первое с чего надо начать это:

Синтаксис: onclick="скрипт"

А уж в скрипт можно поместить все, что угодно! Т.е. при клике будет выполняться кое-то действие.

Примеры работы onclick.

Ну посмотрим самый простой пример работы onclick

<div onclick="alert(' Щелчок мыши!')"> Щелкните мышью на тексте</div>

Нажмите на текст...

Щелкните мышью на тексте 2.

Второй пример onclick.

Ну что.. давайте провесим на onclick, какое-то действие, самое простое - показать время.

<button onclick="getElementById('demo').innerHTML = Date()">Сколько времни!?</button>
<kod id="demo"></kod>

Нажмите по кнопке...

Как сделать в onclick два события!?

Не буду выделять в отдельную страницу…

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

Пример два события по одному нажатию на кнопку – давайте соединим два верхних примера в одно нажатие onclick

<button onclick="getElementById('demo').innerHTML = Date();alert('Щелчок мыши!')">Два события.</button>
<kod id="demo"></kod>

Изменить цвет текста onclick!?

Если , например нужно изменить где-то цвет, то можно посмотреть пример с помощью onclick

Код:

<button onclick="getElementById('rezult').setAttribute('style', 'color: red;');">Изменить цвет</button>
<div id="rezult">Здесь текст, который будет менять при нажатии</div>

Результат:

Здесь текст, который будет менять при нажатии

onclick и функция!?

Например, когда надо много событий навесить в onclick, то можно навесить на onclick только функцию, а в функции написать функцию, которая и будет выполнять все, что нужно при нажатии на кнопку...

Далее изменение текста и одновременное изменение цвета.

Код:

<<button onclick="foo()">Нажми здесь</button>

далее скрипт, либо можно выделить в отдельный файл скрипта...

document.getElementById("rezult_1").innerHTML = "привет";

document.getElementById("rezult_1").setAttribute("style", "color: red" );

}

</script>

Результат:

Здесь текст, который будет менять при нажатии

Не забудь !

сказать спасибо!