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

Для выполнения задания пришлось создать массив букв. Думаю, что это не верно. Не смог понять из курса, как вытащить текстовое содержимое у кнопки, а не data. Вот, хочу выяснить как) На названия не обращайте внимания, писал быстро не запаривался. Вот мой код

Сводка

`let submitButtons = document.querySelectorAll(’.key’);
let Display = document.querySelector(’.display’);
let Clear = document.querySelector(’.clear’);
let klava = [‘й’,‘ц’,‘у’,‘к’,‘е’,‘н’,‘г’,‘ш’,‘щ’,‘з’,‘х’,‘ъ’,‘ф’,‘ы’,‘в’,‘а’,‘п’,‘р’,‘о’,‘л’,‘д’,‘ж’,‘э’,‘ё’,‘я’,‘ч’,‘с’,‘м’,‘и’,‘т’,‘ь’,‘б’,‘ю’,’ '];

for (let i of submitButtons) {
i.onclick = function () {
Display.textContent += klava[i.dataset.index];
}
};
Clear.onclick = function () {
Display.textContent = ‘’;
};`

Вот так можно сделать без массива)

let keys = document.querySelectorAll('.key');
let display = document.querySelector('.display');
let clear = document.querySelector('.clear');

for (let key of keys) {
  key.onclick = function () {
  display.textContent = display.textContent + key.textContent;
  }
};

clear.onclick = function () {
  display.textContent = '';
};
4 Симпатий

Мда, все оказалось гораздо проще, чем я думал))) Спасибо)

1 Симпатия

О, сделал один в один так же. только вместо display.textContent + key.textContent делал через +=. И да, как и топикстартер, сидел и думал, как же применить dataset.index… Оказалось проще.

1 Симпатия

Один вариант изящный, другой находчивый :+1:
:question:Но как все-таки должно выглядеть решение этого испытания, основываясь именно на той учебной программе из трёх глав “Знакомство с JavaScript”, которая была дана? Поправьте, если ошибаюсь, но о возможностях подобных решений (как в примерах выше) в обучении нам Кекс не рассказывал.

вот так работает с методом append

let display = document.querySelector(’.display’);
let keys = document.querySelectorAll(’.key’);
let clear = document.querySelector(’.clear’);

for (let key of keys) {
key.onclick = function () {
display.append(key.textContent);
}
}

clear.onclick = function () {
display.textContent = ‘’;
}

Первый вариант.
В обучении вот https://htmlacademy.ru/courses/343/run/16

1 Симпатия

спасибо:) теперь понятно на каком месте были мои глаза (это я не про подсказку, ее то видел, но не открывал до сегодня:)

Подскажите, пожалуйста, почему задается класс (’.clear’) в этой строке:
let clear = document.querySelector(’.clear’);

если в index.html вот так class=“button clear”

Потому что классов button много, а clear только один