Html input button onclick

Событие onclick — это, пожалуй, самое популярное событие на странице, т.к. щелчки мышью мы совершаем по кнопками, по ссылкам в меню, по элементам аккордеона, которые сворачиваются и разворачиваются и т.п.

Начнем рассматривать обработку этого события с простого примера.

Быстрее щелкайте по абзацу!

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

Пантелею-программисту
Нравится печатать быстро.
Целый день сидит-молчит
И по кнопочкам стучит.

. и понимаем, что нам не хватает теперь обратного действия — чтобы при повторном клике по кнопке текст сворачивался. Сделаем этот вариант, но уже с использованием классов. В коде, размещенном ниже, у нас есть 2 элемента — кнопка с и абзац , к которым мы обращаемся в функции-обработчике события onclick . Строка pText.classList.toggle(‘hideText’) позволяет убирать класс hideText , если он присутствует как атрибут в элементе pText , или добавлять, если класса нет. Тернарный оператор в последней строке функции позволяет менять текст кнопки в зависимости от того, который написан в данный момент.

Пантелею-программисту
Нравится печатать быстро.
Целый день сидит-молчит
И по кнопочкам стучит.

Обработка события onclick для меню

В следующем примере рассмотрим, как предыдущий код можно применить к сворачиванию/разворачиванию меню, которое размещено внутри элементов списка. Мы используем css-свойство animation , чтобы меню появлялось из прозрачного состояния (за это отвечает свойство opacity ). Обратите внимание, что теги

В функцию showHideMenu(event) передается параметр event , который мы вроде бы нигде не записывали. Этот параметр — ссылка на событие со всеми его свойствами и методами. Нужен параметр event для того, чтобы при клике на ссылке страница не "прыгала" вверх, т.к. именно к этому приводит такая запись атрибута href="#" . Для этого мы отменяем действие по умолчанию при клике на такой ссылке с помощью метода event.preventDefault() .

Вы можете проверить действие метода event.preventDefault() , кликнув на ссылке с текстом "Menu" и на любой другой ссылке открывшегося меню, чтобы посмотреть на разницу.

Обработка события onclick для элементов форм

В формах чаще всего клики мышью обрабатываются для кнопок, флажков и радио-кнопок (переключателей). Мы рассмотрим вариант скрипта, который меняет изображение при клике на одной из радио-кнопок. Для этого создадим html-разметку, в которой будет форма с именем imageControl и 4 переключателя. В переключателях важным атрибутом для нас будет value , в котором указан путь к изображениям, которые затем мы будем подставлять в качестве атрибута src для изображения:

Приветствую вас, начинающие веб-разработчики и не только!

Рассмотрим атрибут HTML onclick и его особенности.

Навигация по статье:

onclick— представляет собой атрибут событий, при помощи которого можно задать скрипт срабатывающий при клике на элементе.

Событие onclick является базовым в HTML так как на нем завязано практически всё взаимодействие посетителя с сайтом. Поэтому оно активно применяется в скриптах для реализации определённых задач.

Для каких элементов можно использовать атрибут onclick в HTML?

Синтаксис написание этого атрибута выглядит так:

Давайте разберём что же означает набор этих странных символов.

В данном примере мы задаём атрибут onclick для кнопки button. Чтобы браузер понял что нам нужна именно кнопка мы указываем тип type="button". Далее в этом атрибуте мы пишем javascript код.

В данном случае мы вызываем модальное окно и выводим в нём текст при помощи метода alert():

В скобках в кавычках указываем текст, который нужно вывести.

И последнее задаём текст, который будет написан на кнопке при помощи value="Нажми на меня!"

А вот так будет выглядеть это чудо в действии:

Кроме кнопок атрибут onclick можно применять к ссылкам и к любым другим тегам HTML, НО там есть свои особенности, о которых поговорим ниже.

Особенности применения onclick для ссылки HTML

HTML код написания этого атрибута в теге ссылки выглядит так:

Как видите код немного отличается. Дело в том, что по правилам HTML для ссылок нам обязательно нужно указывать атрибут href, в котором нужно указать страницу для перехода. Проблема в том, что нам ведь не нужно чтобы при клике по ссылке осуществлялся переход, нам нужно чтобы срабатывал наш скрипт. Для этого внутри атрибута onclick мы дописываем return false;

Это позволяет нам добиться того чтобы браузер проигнорировал то что написано внутри атрибута href и никуда не переходил.

Вы наверное спросите: «А зачем тогда вообще оставлять атрибут href? Удалили его и все дела!»

В принципе такой вариант тоже возможен и он будет работать, НО с точки зрения валидности HTML кода это не есть хорошо, так как этот атрибут является основным и неотъемлемым для ссылки и удаляя его вы коварно лишаете ссылку важнейшей части её «тела». Валидаторы вам этого не простят!

Внутри атрибута href можно задать следующие значения:

  • оставить его пустым href=""
  • поставить в нём решётку href="#"
  • написать href="javascript://"
  • указать реальную ссылку своего сайта href=" //impuls-web.ru/"

Мне больше нравится вариант с javascript:// и #.

Использование функций javascript в атрибуте HTML onclick

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

The onclick attribute is an event attribute supported by all browsers. It appears when a user clicks on a button element. If you want to make a button onclick, you need to add the onclick event attribute to the element.

How to Add a URL to the window Object¶

The button onclick runs a script when a button is clicked. Let’s see an example where we have a button, clicking on which will take you to our website. To achieve this, we just added the URL of the website to the window object.

Example of adding URL to the window object

You can also use a button onclick in order to know the current date just by adding "getElementBy >

Example of using a button onclick to know the current data

The onclick event is used to call a function when an element clicked. That is why it is mostly used with the JavaScript function. Let’s consider an example where you need to click the button to set a function that will output a message in a


[an error occurred while processing the directive]
Карта сайта