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

Курсы Коллекции и свойства элементов
21

Ложная тревога. Неправильно была взята переменная.

22

Нопомните, пожалуйста, где про onclick говорилось.

1 лайк
23

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

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

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

24

Сделал точно также, думал около часа, а все оказалось проще)

25

Тоже потратил много времени на решение тупо из-за того, что в предыдущих задачах не было информации об onclick и ты пытаешься решить испытание именно теми методами, которые были в предыдущих задачах. Начал искать через гугл, пошёл по другой тропе, пробовал через submit, onsubmit…
Прошу, не делайте людям нервы и если это обучение на то, чтобы понять смысл того, что делаешь, то добавьте информацию в главу об onclick или предупредите в подсказке, что здесь могут использоваться подобные свойства для решения.

5 лайков
26

Вот мой вариант решения. Я не стала отдельно задавать переменную для кнопки ‘.clear’, а влепила её вместе со всеми кнопками в коллекцию кнопок.

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

for(let button of button_letter){

button.onclick = function(){      
  if(button.classList.contains('space')==true){
    display.textContent += " "; 
    }
  if(button.classList.contains('clear')==true){
    display.textContent = "";
    }
  else{
    display.textContent += button.textContent;
    }  
}

}

27

Заметил что пробелы правильно не отображаются, для правильного отображения множественного пробела добавил <pre></pre>.

let keyboards = document.querySelectorAll('.button'),
  display = document.querySelector('.display');
display.innerHTML = '<pre></pre>';
let disp = document.querySelector('pre');
for (let valuu of keyboards) { valuu.onclick = function () {
  if (valuu.classList.contains('clear')) { disp.textContent = ''; 
  } else { disp.textContent += valuu.textContent;}};};

Теперь хоть 10 пробелов подряд!!!

1 лайк
28

Можно чуть проще display.style.whiteSpace = 'pre-wrap';
Но лучше наверное изначально в CSS добавлять такое.

1 лайк
29

также обратил внимание на проблему с множественными повторяющимися пробелами, они попросту срезаются до одного пробела, решить не смог. Ваш способ у меня дает перенос каретки первой строки на 1 строку вниз, далее работает как надо.

30

да, через pre-wrap теперь заработало как надо. спасибо

31

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

for(let key of keys){
key.addEventListener(‘click’, ()=>{
display.textContent += key.textContent
})
}

clear.addEventListener(‘click’, ()=> display.textContent = ‘’);

32

Долго ломал голову, а решение оказалось проще простого и обошлось без использования функций, которые ещё не были “изучены”.

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

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

space.onclick = function() {
display.append(space.textContent);
};

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

1 лайк
34

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

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

for (let element of knopki) {
element.onclick = function () {
if (element.classList.contains(‘clear’)) {
textarea.textContent = ‘’;
} else {
textarea.textContent = textarea.textContent + element.textContent;
}
}
};

35

Слушайте , есть ли мне вообще смысл продолжать что-то тут учить если я не могу сделать это испытание? Мне кажется что все чему я пока научился это читать и переписывать код , сидел больше часа над этим заданием , пытался хоть что-то понять но даже начать не смог , потом просто скопипастил с форума . Нужна помощь… :tired_face: :tired_face:

36

Здравствуйте.
Пытаюсь сделать данное задание, есть пара вопросов.
На данный момент:

  1. Понял как доставать содержимое отдельных “букв” и записывать “отображать” их на дисплее:
    display.textContent = keys[10].textContent;

  2. Написал следующий код:
    let keys = document.querySelectorAll(’.key’);
    let display = document.querySelector(’.display’);

for (key of keys) {
key.onclick = function() {
display.textContent = key.textContent;
console.log(key.textContent);
}
}

Понимаю, что необходимо использовать цикл, но совершенно не понимаю как он работает.
Т.е. простые вещи типа такого понятны: (выведет все буквы по очереди)
for (key of keys) {
console.log(key.textContent;
}

А как быть с обработкой нажатия, в моём варианте при нажатии на любую из кнопок я так понимаю выводится пробел, т.е. берется “содержимое” ТОЛЬКО кнопки, отвечающей за пробел. Думаю из-за того, что она является последним элементом очереди.

Прошу подсказать как исправить ситуацию.
Большая просьба не давать готовые решения, хочется додумать самому.
Буду благодарен за ответы.

37

Добрый день!
Вот мой код
let ekran = document.querySelector(".display");
let bucva = document.querySelectorAll(".key");
let ctisto = document.querySelector(".clear")
ekran.textContent = bucva.textContent;

for(let clava of bucva) {
clava.onclick = function() {
ekran.textContent += clava.textContent;
console.log(clava.textContent)
}
ctisto.onclick = function() {
ekran.textContent = “”;
}
}

38

Моё решение…

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

for (let i = 0; i < keyButton.length; i++) {
let buttons = keyButton[i];
buttons.onclick = function() {
display.append(buttons.textContent)
}
};

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

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

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

for (let element of buttonKey) {
  element.onclick = function() {
  display.append(element.textContent);
  };
};
40

15/11/2022. Почему js заходит тяжело?

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

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

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

ну как вариант…

const display = document.querySelector(’.display’);
const clearBtn = document.querySelector(’.clear’);
const keyboard = document.querySelector(’.keyboard’);

keyboard.addEventListener(‘click’, (evt) => {
evt.preventDefault();
display.append(evt.target.textContent)
});

clearBtn.addEventListener(‘click’, () => {
display.textContent = ‘’;
});