DWWEB.RU
СКРИПТЫ

Onclick в javascript примеры

На onclick можно повесить вообще любое событие, какое только можно придумать! Рассмотрим несколько вариантов реализации onclick, каждый из этих способов клика по кнопке используются по необходимости, либо по предпочтению!

Навигация по странице :
  1. Синтаксис : Onclick в HTML
  2. Пример: Onclick в HTML
  3. Синтаксис : Onclick в JavaScript
  4. Пример: Onclick в JavaScript
  5. Синтаксис :Onclick В JavaScript, используя метод addEventListener()
  6. Пример:Onclick В JavaScript, используя метод addEventListener()
  7. Еще примеры использования Onclick


    Синтаксис : Onclick в HTML

  1. <element onclick="Script">


    Пример: Onclick в HTML

  2. Для иллюстрации работы onclick нам понадобится блок - это будет div, вовнутрь помещаем onclick, внутри onclick равно двойные кавычки и туда помещаем alert, а уже там используем одинарные кавычки - иначе это не будет работать и будет выдавать ошибку в консоль! И помести уже в алерт, како-то текст:
    <div onclick="alert(' Щелчок мыши!')"> Щелкните мышью на тексте</div> 

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

    Нажми на меня - проверь работу onclick в действии!


    Синтаксис : Onclick в JavaScript

  3. object.onclick = function(){Script};


    Пример: Onclick в JavaScript

  4. С Onclick в HTML было просто и понятно, но как понять теперь второй способ использования onclick. Первое, что вас наверное смущает это : object
  5. Чтобы это понять, нам понадобится кнопка... button

    <button id="onclick_v_javascript">Это второй способ реализации Onclick в JavaScript</button>
    Можно было обратиться к тегу(button), но на странице их будет несколько, поэтому обратимся к id с помощью querySelector-a
    document.querySelector("#onclick_v_javascript").onclick = function(){alert("Это второй способ реализации Onclick в JavaScript");};

    Соберем все вместе:

    <button id="onclick_v_javascript">Это второй способ реализации Onclick в JavaScript</button>

    <script>document.querySelector("#onclick_v_javascript").onclick = function(){alert("Это второй способ реализации Onclick в JavaScript и вывод через alert");}; </script>

    Результат:


    Синтаксис : В JavaScript, используя метод addEventListener()

  6. object.addEventListener("click", Script);


    Пример:Onclick В JavaScript, используя метод addEventListener()

  7. И последний элемент теории Onclick - использование метода addEventListener
  8. Нам опять понадобится кнопка

    <button id="onclick_v_addEventListener">Это второй способ реализации Onclick в JavaScript</button>

    Опять применяем querySelector - обращаемся к нашей кнопке, добавляем метод addEventListener, во внутрь помещаем событие click И второй параметр - это функция myFoo.

    document.querySelector("#onclick_v_addEventListener") .addEventListener("click", myFoo);

    Далее нам понадобится функция:

    function myFoo() { alert("Это третий способ реализации Onclick в JavaScript через addEventListener и вывод через alert"); }

    Соберем весь код вместе:

    <button id="onclick_v_addEventListener">Это третий способ реализации Onclick в JavaScript</button>

    <script>

    document.querySelector("#onclick_v_addEventListener") .addEventListener("click", myFoo);

    function myFoo()

    {

    alert("Это третий способ реализации Onclick в JavaScript через addEventListener и вывод через alert");

    }

    </script>

    Результат:


    Еще примеры использования Onclick

В качестве примера рекомендую - страницу с кнопками - все события производится именно кнопками, на которых повешено событие onclick.

1.

пример onclick.

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

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

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

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

2.

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

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

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

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

3.

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

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

Код:

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

Результат:

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

4.

onclick и функция!?

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

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

Код:

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

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

<script> function foo() { 

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

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

}    

</script>

Результат:

Здесь текст, который будет менять при нажатии
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
onclickonclick idonclick functiondocument onclickonclick varonclick actiongetelementsbyclassname onclickonclick if elsediv onclickonclick javascriptonclick returnonclick две функцииonclick джаваскрипт примеры

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019