Как использовать событие JavaScript onClick и функцию JavaScript require? Часть 1
Если вы когда-либо использовали форму на веб-сайте, скорее всего, вы взаимодействовали с JavaScript. Это технология, благодаря которой работают кнопки и раскрывающиеся списки. В этой статье мы рассмотрим событие onClick в JavaScript, а также расскажем о функции require.
Что такое событие JavaScript onClick?
JavaScript — это язык программирования, который можно использовать для добавления интерактивности на веб-сайты. Каждый раз, когда на странице сайта происходит что-то большее, чем просто статичное изображение — обновляемый контент, интерактивные карты, анимация 2D/3D графики, или прокрутка видео в проигрывателе — перед вами сайт с JavaScript.
Событие onClick — одно из самых популярных событий в JavaScript, которое активируется при нажатии на элемент. Например, у вас есть кнопка на сайте — когда пользователь нажимает эту кнопку, вы используете событие onClick, чтобы сделать какое-то действие.
Возможно, вы хотите отобразить сообщение или перенаправить пользователя на другую страницу. С помощью события onClick можно сделать любое из этих действий. Чтобы использовать событие onClick, вы нужно добавить код на свой веб-сайт. Ниже мы рассмотрим это более подробно.
Как использовать событие onClick?
Для начала вам нужно выбрать элемент, к которому вы хотите добавить событие onClick. В нашем примере с кнопкой мы будем использовать элемент <button>.
Затем необходимо добавить атрибут к вашему элементу. Этот атрибут называется onClick. Значение этого атрибута — это код, который вы хотите запустить при щелчке элемента.
Вот как будет выглядеть наш код с добавленным событием onClick:
<button onClick=»alert(‘Hello, world!’)»>Click me!</button>
Когда пользователь нажмет на эту кнопку, он увидит всплывающее окно с предупреждением «Hello, world!». Внутри сообщения вы можете написать, что угодно.
Вы также можете использовать событие onClick для запуска другого кода javascript. Например, вы можете перенаправить пользователя на другую страницу, используя следующий код:
<button onClick=»window.location = ‘http://www.example.com'»>Click me!</button>
Эта кнопка будет перенаправлять пользователя на сайт www.example.com при нажатии.
Пример события JavaScript onClick
Теперь, когда мы разобрали основы работы с событием onClick, давайте рассмотрим конкретный пример.
Давайте создадим кнопку, при нажатии на которую будет меняться цвет текста на странице. Для этого нам понадобится две вещи:
- Событие onClick.
- Функция javascript document.getElementById().
Событие onClick будет использоваться для запуска функции при нажатии кнопки. Функция document.getElementById() нужна, чтобы отобразить элемент на странице для изменения его стиля.
Вот как будет выглядеть наш код:
Давайте разберем этот код по частям.
Во-первых, у нас есть кнопка:
<button onClick=»changeColor()»>Click me!</button>
К этой кнопке добавлено событие onClick. Значением события onClick является функция changeColor(). Это означает, что при нажатии на кнопку функция changeColor() будет запускаться.
Во-вторых у нас есть код javascript:
<script>
function changeColor() {
document.getElementById(‘myText’).style.color = ‘red’;
}
</script>
Это код, который будет выполняться при нажатии нашей кнопки. Мы создаем функцию с именем changeColor(), эта функция не принимает никаких аргументов.
Внутри нашей функции changeColor() мы используем функцию document.getElementById() для получения элемента на странице. В этом случае мы получаем элемент с идентификатором «myText».
Когда у нас есть элемент, мы можем изменить его стиль. В этом примере мы меняем свойство цвета на красный — это сделает текст красным.
В-третьих, у нас есть элемент:
<p id=»myText»>This is some text.</p>
Это простой элемент абзаца — единственное отличие этого элемента в том, что у него есть атрибут id. Документ будет использовать эту функцию id attribute.getElementById() для поиска элемента на странице.
Когда вы запустите этот код, вы увидите кнопку и текст на странице, а при нажатии на кнопку текст должен стать красным.
Источник: hubspot.com, hubspot.com