Добавление данных через форму

Создадим простую форму, состоящую из текствого поля и кнопки.

<form>
 <input type="text" id="textInput" size="40" placeholder="Add a cat's name">
 <input type="button" id="button" value="Add a cat">
</form>

<ul id="catList">

</ul>

Следует написать код для кнопки, которая будет помещать введённый текст в список.

У нас есть идентификатор кнопки, к которой можно получить доступ через getElementById().

var button = document.getElementById("button");

Далее следует написать код, который будет вызываться при событии click. Код оформим в виде функции с именем buttonClickHandler.

function buttonClickHandler(){
	alert("Кнопка была нажата!");
}

Соединяем свойство кнопки onclick с функцией.

button.onclick = buttonClickHandler;

Полностью код сценария будет следующим.

<script>
window.onload = init;

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

function buttonClickHandler() {
	alert("Кнопка была нажата!");
}
</script>

Это была тестовая версия для проверки. Теперь нам нужно научиться получать текст из текстового поля и добавлять его в список. Доступ к текстовому полю получаем через знакомую функцию getElementById(). Далее мы получим текст из него через свойство value. Перепишем код для кнопки.

function buttonClickHandler() {
	var textInput = document.getElementById("textInput");
    var catName = textInput.value;
	
	// если строка пустая
	if(catName == "") {
		alert("Введите имя кота, пожалуйста");
	}else {
        alert("Добавлен " + catName);
		textInput.value = "";
	}
}

Остался последний штрих - добавить имя кота в список с идентификатором catList. Нам придётся добавлять новый элемент списка li и размещать в нём имя. Так как элементов li у нас не существует, мы не можем вызывать функцию getElementById(). Вместо неё вызывается другая функция для создания нового элемента document.createElement(). После создания можно присвоить ему текст.

var li = document.createElement("li");
li.innerHTML = catName;

Элемент готов, но он ещё не является частью DOM, нам нужно явно указать, куда мы собираемся его вставить. В нашем случае li является дочерним элементом ul.

var ul = document.getElementById("catList");
ul.appendChild(li);

Снова переписываем код для щелчка кнопки.

function buttonClickHandler() {
	var textInput = document.getElementById("textInput");
    var catName = textInput.value;
	
	// если строка пустая
	if(catName == "") {
		alert("Введите имя кота, пожалуйста");
	}else {
        //alert("Добавлен " + catName);
		var li = document.createElement("li");
        li.innerHTML = catName;
		var ul = document.getElementById("catList");
        ul.appendChild(li);
		textInput.value = "";
    }
}

Реклама