- Теория
- Теория
Испытание: Виртуальная клавиатура
Мяу! Я пролил молоко на ноутбук. Да, снова. А что такого? У меня лапки!
После того, как Кекс в очередной раз опрокинул блюдце с молоком на клавиатуру, некоторые клавиши начали залипать, и работать стало невозможно. Но сроки горят! Кекс решил, что ему нужна виртуальная клавиатура, которая позволит набирать текст, кликая по кнопкам мышкой (котам так привычнее).
Верстальщик выполнил свою часть работы — сверстал саму клавиатуру и дисплей, где будет отображаться набранный текст. Клавиатура состоит из 33 кнопок с буквами, кнопки «пробел» и кнопки очистки дисплея. Дисплей — это элемент <div>
. Набранный с помощью виртуальной клавиатуры текст является его текстовым содержимым.
Ваша задача — написать скрипт, который заставит клавиатуру работать.
Кнопки с буквами и «пробел» имеют класс key
, а дисплей — класс display
. При клике на кнопку с буквой или пробелом текстовое содержимое этой кнопки должно добавляться к текстовому содержимому дисплея.
Кнопка очистки имеет класс clear
. При клике на неё весь текст внутри дисплея должен удаляться, для этого в текстовое содержимое дисплея нужно записать пустую строку.
Добавлять в текстовое содержимое элемента новую букву можно разными способами.
// Создадим (или найдём) элемент
let text = document.createElement('p');
// Пусть у него уже будет текстовое содержимое
text.textContent = 'Буквы: ';
Добавим новую букву с помощью конкатенации:
// Полная запись
text.textContent = text.textContent + 'а'; // Результат: 'Буквы: а'
// Краткая запись
text.textContent += 'б'; // Результат: 'Буквы: аб'
Добавим новую букву с помощью метода append
:
text.append('в'); // Результат: 'Буквы: абв'
Кекс хочет набирать текст, кликая по кнопкам виртуальной клавиатуры, и видеть его на дисплее. При клике на кнопку «Очистить» дисплей должен очиститься. Напишите необходимый для этого скрипт.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.