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

Для выполнения задания пришлось создать массив букв. Думаю, что это не верно. Не смог понять из курса, как вытащить текстовое содержимое у кнопки, а не 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 = ‘’;
};`

1 лайк

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

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 = '';
};
31 лайк

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

2 лайка

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

4 лайка

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

2 лайка

вот так работает с методом 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 = ‘’;
}

11 лайков

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

2 лайка

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

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

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

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

2 лайка

Хочу сделать более универсально, но не получается. Подскажите почему при нажатии на кнопку “Очистить” она печатается вместо того чтобы очищать дисплей?

let buttons = document.querySelectorAll(’.button’);
let display = document.querySelector(’.display’);

for (let key of buttons) {
  key.onclick = function () {
    if ( key == 0 ) {
      display.textContent = '';
    } else {
      display.textContent += key.textContent;
    }
  }
};

У меня как-то так получилось
let buttons = document.querySelectorAll(’.button’);
let display = document.querySelector(’.display’);
for ( let button of buttons) {
button.onclick = function () {
if (button.classList.contains(‘key’)) {
display.append(button.textContent);
}
else {
display.textContent =’ ';
}
};
};

1 лайк

Спасибо огромное! Я второй день ломала голову с этим заданием:(

1 лайк

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

let letters = document.querySelectorAll(’.key’);
let disp = document.querySelector(’.display’);
let text = document.createElement(‘p’);
let clear = document.querySelector(’.clear’);

text.textContent = ‘’;
for (let letter of letters) {
letter.onclick = function () {
text.append(letter);
disp.textContent = text.textContent;
}
};

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

}

Посмотрев, здесь ответы, понял что в моем много лишнего. При нажатии на букву , на дисплей выводит, но почему она пропадает из виртуальной клавиатуры никак не пойму…

Еще один из способов решения:

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


for (let keyboardButton of keyboardButtons) {
  keyboardButton.onclick = function () {
    let newString = keyboardButton.textContent
    display.append(newString);
  };
}

clear.onclick = function () {
  display.textContent = '';
};
1 лайк

У Вас код в первую ветку не заходит никогда, так как условие странное. Получается key это выделенный элемент в данном случае кнопка Очистить, и это значение никогда 0 равно не будет.
И получается идёт во 2-ую ветку и берется textContent от кнопки.
С таким условием всё работает, но тут можно ещё подумать над более изящным условием.

let buttons = document.querySelectorAll('.button');
let display = document.querySelector('.display');

for (let key of buttons) {
  key.onclick = function () {
    if ( key.textContent == 'Очистить' ) {
      display.textContent = '';
    } else {
      display.textContent += key.textContent;
    }
  }
};

Upd: вот решение получше как по мне if (key.classList.contains('clear'))

Значит написала всё. Смотрю - не работает, хотя вроде всё правильно (даже на листе расписала последовательность). Не могла понять, что не так.
Зашла на форум. Подумала “Может это я неправильно думаю”.
Нахожу этот вариант. 1 в 1 просто.
У меня еще больше вопросов стало возникать, как так?
Потом уже просто начала сравнивать посимвольно… И… Ошибка была в том, что неправильно написала слово (onklick <- это неправильный вариант).
Одна буква, потратила мне нервы (чуть-чуть) и время.

Так что совет на будущее, проверяйте правильность слов, расставления скобок и прочее :slight_smile:

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

function one (i){
let test = display.textContent = keys[i].textContent;
  keys[i].onclick = function(){
    display.append(test);
  }
}

for (i = 0; i < 34; i++){
  one(i);
}

button.onclick = function(){
    display.textContent = '';
}

Вроде все работает. Результат не принимает

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

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

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

Сидел я значит ломал голову, и никак не мог додуматься что внутри функции обработчика код:

display.textContent += key.textContent;, не тоже самое что и display.textContent + key.textContent;

Так как функция сначала берет дисплей. Кстати, у всех при нажатии на кнопку она сжимается? Как это пофиксить? Пробовал через key.disabled = true; - не выходит.