Задачи на основы работы с DOM в JavaScript

Перед решением задач изучите теорию к данному уроку.

Примеры решения задач

Задача . Алерт по нажатию на кнопку

Задача. Повторите поведение кнопки по нажатию на нее:

Решение:

<button onclick="alert('Привет!')">Нажми на меня</button>

Задача . Изменение текста в инпуте

Задача. Повторите поведение кнопки по нажатию на нее (она меняет текст в инпуте):

Решение:

<button onclick="buttonClick()">Нажми на меня</button>
<input type="text" id="input" value="???">

function buttonClick() {
	var input = document.getElementById('input');
	input.value = '!!!';
}

Задача . Вывод содержимого инпута

Задача. Повторите поведение кнопки по нажатию на нее (она выводит алертом содержимое инпута):

Решение:

<button onclick="buttonClick()">Нажми на меня</button>
<input type="text" id="input" value="???">

function buttonClick() {
	var input = document.getElementById('input');
	alert(input.value);
}

Задача . Квадрат содержимого инпута

Задача. Повторите поведение кнопки по нажатию на нее (она выводит алертом содержимое инпута, возведенное в квадрат):

Решение:

<button onclick="buttonClick()">Нажми на меня</button>
<input type="text" id="input" placeholder="Введите число!">

function buttonClick() {
	var input = document.getElementById('input');
	var number = Number(input.value);
	var square = number*number;
	alert(square);
}

Задача . Обмен содержимым между инпутами

Задача. Повторите поведение кнопки по нажатию на нее (она осуществляет обмен содержимым между двумя инпутами, можете понажимать на нее несколько раз или вручную сменить содержимое инпутов):

Решение:

<button onclick="buttonClick()">Нажми на меня</button>
<input type="text" id="input1" value="!!!"><input type="text" id="input2" value="???">

function buttonClick() {
	var input1 = document.getElementById('input1');
	var input2 = document.getElementById('input2');
	var input1Value = input1.value;
	var input2Value = input2.value;
	input1.value = input2Value;
	input2.value = input1Value;
}

Задача . По нажатию на кнопку меняется ее текст

Задача. Повторите поведение кнопки по нажатию на нее (поменяется ее текст):

Решение: в данной задаче воспользуемся кнопкой, созданной через input с атрибутом type в значении button, чтобы легко можно было сменить ее текст, обратившись к атрибуту value (в кнопке через тег button текст меняется через innerHTML, это тема следующего урока).

Решим задачу через this:

<input type="button" onclick="buttonClick(this)" value="Нажми на меня">

function buttonClick(elem) {
	elem.value = 'Новый текст кнопки';
}

Задача . Работа с CSS

Задача. Повторите поведение кнопки по нажатию на нее (она меняет цвет текста в инпуте):

Решение:

<button onclick="buttonClick()">Нажми на меня</button>
<input type="text" id="input" value="Какой-то текст!">

function buttonClick() {
	var input = document.getElementById('input');
	input.style.color = 'red';
}

Можно не вводить промежуточную переменную input, а сразу поменять цвет:

function buttonClick() {
	document.getElementById('input').style.color = 'red';
}

Задача . Блокирование полей ввода

Задача. Повторите поведение кнопок по нажатию на них (одна из них блокирует инпут с помощью атрибута disabled, а другая разблокирует):

Решение:

<button onclick="button1Click()">Заблокировать</button>
<button onclick="button2Click()">Отблокировать</button>
<input type="text" id="input" value="Какой-то текст!">

//Заблокирует элемент
function button1Click() {
	var input = document.getElementById('input');
	input.disabled = true;
}

//Отблокирует элемент
function button2Click() {
	var input = document.getElementById('input');
	input.disabled = false;
}