Примеры решения задач
Задача . Алерт по нажатию на кнопку
Задача. Повторите поведение кнопки по нажатию на нее:
Решение:
<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;
}
Задачи для решения
События через атрибуты
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Метод getElementById и работа с атрибутами
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Работа с this
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Работа с CSS
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Задачи
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Закрепление пройденного
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.