Как сделать кнопку в javascript

Как сделать кнопку в javascript

Для отправки введенных данных на форме используются кнопки. Для создания кнопки используется либо элемент button :

Либо элемент input :

С точки зрения функциональности в html эти элементы не совсем равноценны, но в данном случае они нас интересуют с точки зрения взаимодействия с кодом javascript.

При нажатии на любой из этих двух вариантов кнопки происходит отправка формы по адресу, который указан у формы в атрибуте action , либо по адресу веб-страницы, если атрибут action не указан. Однако в коде javascript мы можем перехватить отправку, обрабатывая событие click

При нажатии на кнопку происходит событие click , и для его обработки к кнопке прикрепляем обработчик sendForm . В этом обработчике проверяем введенный в текстовое поле текст. Если его длина больше 5 символов, то выводим сообщение о недостимой длине и прерываем обычный ход события с помощью вызова e.preventDefault() . В итоге форма не отправляется.

Если же длина текста меньше шести символов, то также выводится сообщение, и затем форма отправляется.

Также мы можем при необходимости при отправке изменить адрес, на который отправляются данные:

В данном случае, если длина текста больше пяти символов, то текст отправляется, только теперь он отправляется по адресу PostForm , поскольку задано свойство action:

Для очистки формы предназначены следующие равноценные по функциональности кнопки:

При нажатию на кнопки произойдет очистка форм. Но также функциональность по очистке полей формы можно реализовать с помощью метода reset() :

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

При нажатии на подобную кнопку отправки данных не происходит, хотя также генерируется событие click:

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

How to Create Button in JavaScript

Developers mostly want their web pages to be attractive and make them interactive. For this purpose, buttons are added to the web page. For instance, when there is a need to send or receive data, including click events for added functionalities for the user while registering or signing in to an account. In such cases, buttons allow the end-user to perform various functionalities smartly.

This blog will explain the methods to create buttons in JavaScript.

How to Create Button in JavaScript?

To create button in JavaScript, the following methods can be utilized:

The following approaches will demonstrate the concept one by one!

Method 1: Create Button in JavaScript Using “createElement()” and “appendChild()” Methods

The “createElement()” method creates an element, and the “appendChild()” method appends an element to the last child of an element. These methods will be applied for creating a button and appending it to the Document Object Model(DOM) that needs to be utilized, respectively.

Syntax

document. createElement ( type )

element. appendChild ( node )

In the above syntax, “type” refers to the type of element that will be created using the createElement() method, and “node” is the node that will be appended with the help of the appendChild() method.

The following example will explain the stated concept.

Example

Firstly, a “button” will be created using the document.createElement() method and stored in a variable named “createButton”:

Next, the “innerText” property will refer to the created button and set the text value of the specified button as follows:

Lastly, the “appendChild()” method will append the created button to DOM by referring to the variable in which it is stored as an argument:

The output of the above implementation will result as follows:

Method 2: Create Button in JavaScript Using “Type” Attribute of “input” Tag

The “type” attribute represents the type of input element to display. It can be used to create a button by specifying “button” as the value of the type attribute of the input tag.

Syntax

Here, “button” indicates the type of the input field.

Check out the below-given example.

Example

Firstly, we will use an input tag, specify its type as “button”, and value as “Click_Me”. As a result, a button will be created. Furthermore, it will trigger the “createButton()” function when clicked:

In the JavaScript file, we will define the “createButton()” function which will generate an alert box when the added button will be clicked:

Output

The discussed techniques to create a button in JavaScript can be utilized suitably according to the requirements.

Conclusion

To create a button in JavaScript, “createElement()” and “appendChild()” methods can be applied for creating a button and appending it to be utilized in the DOM. Another technique that can be used to create a button is defining an input type and adding the associated functionality. This article demonstrated the methods to create a button in JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Кнопка

Рассмотрим пример, как нужно обрабатывать нажатия кнопки в форме с помощью JavaScript.

Создадим простейшую форму.

На данный момент кнопка ничего не делает. Получим доступ к кнопке.

Далее следует создать код, который будет выполняться при нажатии кнопки.

Осталось подключить созданную функцию к переменной

При нажатии на кнопку появляется сообщение.

Идём дальше. Мы хотим получить текст, введённый пользователем в текстовом поле. Когда пользователь вводит текст, то у элемента input type=»text» в свойстве value появляется значение, которое и содержит текст пользователя. Таким образом, нам нужно сначала получить доступ к элементу страницы по идентификатору, а затем его свойство.

Теперь выводится сообщение, в котором содержится имя кота. Не помешает небольшая проверка, что текст был введён.

Третий шаг — выводить имена котов на самой странице. Мы уже приготовили список ul, к которому тоже можно получить доступ и добавлять дочерние элементы. Для получения доступа используем знакомый метод getElementById(). Для динамического создания нового элемента используется метод document.createElement(). После создания мы можем настроить элемент, например, прописав текст. Для текста элемента списка будем использовать переменную, которая содержит имя кота. Создав новый элемент, его необходимо добавить к родительскому элементу через appendChild().

Новые способы

В последнее время стали использовать другой код. Например, используют const вместо var, вместо onclick — addEventListener.

Также вместо getElementById() можно использовать querySelector(). А в addEventListener использовать другой формат вызова функции.

Как сделать кнопку в javascript

Кнопка — интерактивный элемент с тремя состояниями. Первое — неактивна, второе — мышка занесена над кнопкой, третье — активное (мышка нажала на кнопку). Чтобы её реализовать, надо задать вопрос: что важно для кнопки?

1. Координаты
2. Размеры
3. Спрайт
4. Текущее состояние

Собрав требования, можно написать объект кнопки.

Можно приступать к обработке событий кнопки. Для их отслеживания необходимо иметь доступ к стандартным DOM событиям тега canvas. Кроме того, поскольку события из коробки работают только с DOM-узлами, их придётся пробрасывать через canvas, а кнопок может быть много, значит надо ввести id.

Напишем функцию, инициализирующую события.

Заметим, что для расчёта координат был использован метод _getClickCoordinates, так как свойства события event.clientX и event.clientY хранят координаты мыши относительно экрана, а не относительно документа.

Напишем метод, который деактивирует кнопку, уничтожающую обработчики событий.

Осталась одна проблема: генерация уникального id, который бы не совпадал с другой кнопкой. Для этого следует написать контроллер.

Контроллер

Соберём требования для контроллера. Контроллер должен уметь:

1. добавлять кнопку
2. удалять кнопку
3. генерировать уникальные id для создаваемых кнопок

Кроме того в будущем, возможно, помимо кнопки появятся другие элементы, вроде текстовых полей и форм ввода, поэтому надо придумать универсальный способ генерации id. Также стоит учесть, что операция выделения памяти в js — дорогостоящая операция, поэтому надо сократить количество создаваемых объектов до минимума. Вместо удаления кнопки можно помечать как неактивные, а после инициализировать новыми значениями.

Получился вот такой вот класс.

Разберём его подробнее. Этот класс имеет свойство _elements, которое хранит ссылки на элементы. Как видно из метода _createNewButton, id — это не что иное, как номер элемента в массиве _elemnts. Для более удобной работы с кнопками, добавлено свойство _buttons, которое хранит все id уже созданных кнопок.