Кнопка

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

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


<form>
<input type = "text" id="catNameInput"  size="40"  placeholder="Cat name">
<input type="button" id="addButton"  value="Add  Cat">
</form>
<ul id = "catlist">

</ul>

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


var button = getElementById("addButton");

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


function handleButtonClick {
    alert("Вы нажали на кнопку");
}

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


button.onclick = handleButtonClick;


<script>
window.onload = init;

function init(){
    var button = document.getElementById("addButton")
    button.onclick = handleButtonClick;
}

function handleButtonClick() {
    alert("Вы нажали на кнопку");
}
</script>

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

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


<script>

var button2 = document.getElementById("addButton2")
    button2.onclick = handleButtonClick2;

function handleButtonClick2() {
    var textInput = document.getElementById("catNameInput2");
    var catName = textInput.value;
    alert("Добавлено новое имя кота! " + catName);
}

</script>

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


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.


<button id='newButton'>Нажми меня</button>

<script>
const newButton = document.getElementById('newButton');

function changeBackground(){
	document.body.style.background = 'red';
}

newButton.addEventListener('click', changeBackground);
</script>

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


<style>
.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;
}

.button.is-active {
  color: #1ce;
}
</style>

<button class='button' id='backgroundButton'>Нажми меня</button>

<script>
const backgroundButton = document.querySelector('#backgroundButton')

function changeBackground2(){
	document.body.style.background = 'green';
}

backgroundButton.addEventListener('click', _ => backgroundButton.classList.toggle('is-active'));
</script>

Атрибут onclick

Также можно использовать готовый атрибут у кнопки onclick.


<button onclick="console.log('Привет')">Нажми меня</button>
Реклама