Как сделать кнопку в javascript
Есть список сообщений.
При помощи JavaScript для каждого сообщения добавьте в верхний правый угол кнопку закрытия.
Результат должен выглядеть, как показано здесь:
Чтобы добавить кнопку закрытия, мы можем использовать либо position:absolute (и сделать плитку ( pane ) position:relative ) либо float:right . Преимущество варианта с float:right в том, что кнопка закрытия никогда не перекроет текст, но вариант position:absolute даёт больше свободы для действий. В общем, выбор за вами.
Тогда для каждой плитки код может выглядеть следующим образом:
pane.insertAdjacentHTML("afterbegin", '
Элемент становится pane.firstChild , таким образом мы можем добавить на него обработчик события:
pane.firstChild.onclick = () => pane.remove();
Создать кнопку с атрибутом onclick
Важен атрибут onclick с функцией. Грубо говоря к этому как-то нужно добавить onclick с функцией в которой будет лежать нужный id для передачи в функцию удаления.
input = document.createElement("input"); input.type = "button"; input.value = "Remove"; fragment.appendChild(input);
Отслеживать
задан 12 июл 2017 в 19:56
77 1 1 серебряный знак 7 7 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
input = document.createElement("input"); input.type = "button"; input.value = "Remove"; input.setAttribute("onclick", "remove_market_meta('MarkeID9')"); fragment.appendChild(input);
А лучше сделать так:
input = document.createElement("input"); input.type = "button"; input.value = "Remove"; input.onclick = remove_market_meta('MarkeID9'); fragment.appendChild(input);
как сделать нажатие на кнопку js
Для имитации нажатия на кнопку в JavaScript можно использовать метод click() . Этот метод вызывает событие "click" на элементе, на который он был вызван.
id="myButton">Нажми меня
const button = document.getElementById('myButton'); // имитируем нажатие на кнопку button.click();
В этом примере мы получаем кнопку по ее id, а затем вызываем метод click() на этой кнопке. Это приведет к тому, что будет имитировано нажатие на кнопку.
Обратите внимание, что этот метод может вызвать обработчик события "click" на кнопке, но он не сработает, если кнопка заблокирована (например, атрибутом disabled ) или если обработчик события "click" был удален.
Важно сказать, что событие, вызванное методом click() , будет иметь те же свойства и методы, что и нативное событие ( target , currentTarget , preventDefault() , stopPropagation() ), но имеет некоторые ограничения. Например, может не сработать проверка на долгое нажатие.
Кнопка
Рассмотрим пример, как нужно обрабатывать нажатия кнопки в форме с помощью JavaScript.
Создадим простейшую форму.
На данный момент кнопка ничего не делает. Получим доступ к кнопке.
var button = getElementById("addButton");
Далее следует создать код, который будет выполняться при нажатии кнопки.
function handleButtonClick
Осталось подключить созданную функцию к переменной
button.onclick = handleButtonClick;
window.onload = init; function init() < var button = document.getElementById("addButton") button.onclick = handleButtonClick; >function handleButtonClick()
При нажатии на кнопку появляется сообщение.
Идём дальше. Мы хотим получить текст, введённый пользователем в текстовом поле. Когда пользователь вводит текст, то у элемента input type="text" в свойстве value появляется значение, которое и содержит текст пользователя. Таким образом, нам нужно сначала получить доступ к элементу страницы по идентификатору, а затем его свойство.
var button2 = document.getElementById("addButton2") button2.onclick = handleButtonClick2; function handleButtonClick2()
Теперь выводится сообщение, в котором содержится имя кота. Не помешает небольшая проверка, что текст был введён.
function handleButtonClick2() < var textInput = document.getElementById("catNameInput2"); var catName = textInput.value; if(catName == "")< alert("Введите имя кота, пожалуйста"); >else < alert("Добавлено новое имя кота! " + catName); >>
Третий шаг - выводить имена котов на самой странице. Мы уже приготовили список ul, к которому тоже можно получить доступ и добавлять дочерние элементы. Для получения доступа используем знакомый метод getElementById(). Для динамического создания нового элемента используется метод document.createElement(). После создания мы можем настроить элемент, например, прописав текст. Для текста элемента списка будем использовать переменную, которая содержит имя кота. Создав новый элемент, его необходимо добавить к родительскому элементу через appendChild().
function handleButtonClick3() < var textInput = document.getElementById("catNameInput3"); var catName = textInput.value; if(catName == "")< alert("Введите имя кота, пожалуйста"); >else < var ul = document.getElementById("catlist3"); var li = document.createElement("li"); li.innerHTML = catName; ul.appendChild(li); alert("Добавлено новое имя кота! " + catName); >>
Новые способы
В последнее время стали использовать другой код. Например, используют const вместо var, вместо onclick - addEventListener.
Нажми меня
Также вместо getElementById() можно использовать querySelector(). А в addEventListener использовать другой формат вызова функции.
.button < background-color: #33ae74; transition: background-color 0.5s ease-out; >.button.is-active
Нажми меня
Атрибут onclick
Также можно использовать готовый атрибут у кнопки onclick.