Создать кнопку с атрибутом 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); Кнопка
Рассмотрим пример, как нужно обрабатывать нажатия кнопки в форме с помощью 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.
Как добавить onclick к кнопке через js
Свойство onclick у элемента отвечает за обработку события клика по элементу. Чтобы добавить обработчик, достаточно просто присвоить этому свойству функцию, которая вызовется при клике:
// Получаем элемент const element = document.getElementById('test'); // Добавляем обработку события element.onclick = (event) => // . console.log(event); >; Этот способ имеет недостаток: нельзя навешать несколько обработчиков-функций на событие.
// Получаем элемент const element = document.getElementById('test'); // Добавляем обработку события element.onclick = (event) => // . console.log('first handler'); >; // Добавляем второй обработчик element.onclick = (event) => // . console.log('second handler'); >; Первый обработчик перезапишется вторым. Чтобы этого избежать, лучше использовать addEventListener() :
// Получаем элемент const element = document.getElementById('test'); // Добавляем обработку события element.addEventListener('click', (event) => // . console.log('first handler'); >); // Добавляем второй обработчик element.addEventListener('click', (event) => // . console.log('second handler'); >); В таком случае оба обработчика будут срабатывать по клику на элементе.
Курсы javascript
Здравствуйте, может кто знает, как добавить произвольное событие onclick к определенным ссылкам на сайте (по шаблону или маске)?
Чтобы после загрузки страницы сразу же этот onclick был в коде и его можно было увидеть через исходный код?
чтобы после генерации страницы он выглядел так:
Никогда толком с JS не работал, облазил всякие мануалы и вопросы, но не нашел нигде какого-то решения.
01.10.2021, 18:36
Регистрация: 27.05.2010
Сообщений: 33,009
moytop,
Untitled 999 888 Скачать прайс
13.10.2021, 19:33
Интересующийся
Регистрация: 01.10.2021
Сообщений: 10
Спасибо большое, всё работает, но вторую неделю уже пытаюсь понять как. Просто для того, чтобы иметь гибкость, и например, добавить
let onsubmit = «ym(777,’reachGoal’,’ppp’); return true;»; в форму типа:
Может вас не затруднит хотя бы в общих чертах описать суть кода, особенно let cls = words.map(a => `[href*=»$»]`);
и document.querySelectorAll(cls).forEach(elem => elem.setAttribute(‘onclick’, onclick));
По какому принципу он ищет? когда смотрю документацию, то вижу там только .querySelectorAll — мол это по селекторам поиск. А тут ведь работает не по селекторам, а разбирает html код и конкретные ссылки.
Был бы признателен за любую помощь, чтобы научиться хотя бы минимуму: добавлять любое событие в любую строчку сайта (будь то ссылка, кнопка или форма), может есть ссылки на какие-то правильные документации. Или в целом чтобы можно было понять суть и базовый принцип, что менять в коде, если это кнопка или форма?