• Теория
  • Теория

Испытание: Виртуальная клавиатура

Мяу! Я пролил молоко на ноутбук. Да, снова. А что такого? У меня лапки!

После того, как Кекс в очередной раз опрокинул блюдце с молоком на клавиатуру, некоторые клавиши начали залипать, и работать стало невозможно. Но сроки горят! Кекс решил, что ему нужна виртуальная клавиатура, которая позволит набирать текст, кликая по кнопкам мышкой (котам так привычнее).

Верстальщик выполнил свою часть работы — сверстал саму клавиатуру и дисплей, где будет отображаться набранный текст. Клавиатура состоит из 33 кнопок с буквами, кнопки «пробел» и кнопки очистки дисплея. Дисплей — это элемент <div>. Набранный с помощью виртуальной клавиатуры текст является его текстовым содержимым.

Ваша задача — написать скрипт, который заставит клавиатуру работать.

Кнопки с буквами и «пробел» имеют класс key, а дисплей — класс display. При клике на кнопку с буквой или пробелом текстовое содержимое этой кнопки должно добавляться к текстовому содержимому дисплея.

Кнопка очистки имеет класс clear. При клике на неё весь текст внутри дисплея должен удаляться, для этого в текстовое содержимое дисплея нужно записать пустую строку.

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

// Создадим (или найдём) элемент
let text = document.createElement('p');
// Пусть у него уже будет текстовое содержимое
text.textContent = 'Буквы: ';

Добавим новую букву с помощью конкатенации:

// Полная запись
text.textContent = text.textContent + 'а'; // Результат: 'Буквы: а'

// Краткая запись
text.textContent += 'б'; // Результат: 'Буквы: аб'

Добавим новую букву с помощью метода append:

text.append('в'); // Результат: 'Буквы: абв'

Кекс хочет набирать текст, кликая по кнопкам виртуальной клавиатуры, и видеть его на дисплее. При клике на кнопку «Очистить» дисплей должен очиститься. Напишите необходимый для этого скрипт.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Коллекции и свойства элементов» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.