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

Курсы Знакомство с JavaScript
1

Испытание прошел успешно, но осадочек остался :slightly_smiling_face:. Есть вопрос для знатоков JS.
Все работает замечательно, но когда нажимаю несколько пробелов подряд на экран выводится только один, а хотелось бы столько пробелов, сколько раз нажал.

Для передачи пробела в коде есть ветка условия if. Когда я отправляю (добавляю) elementDisplay.append(' ') - все равно выводит один пробел, а по команде elementDisplay.append(' ') на экран выдает   ввиде текстовых строк, хотя в консоли пробивает как положено - пробелы. Может кто подскажет, как правильно добавить несколько пробелов в код в данном случае.

Код прилагаю.

1. HTML (блок дисплея)

    <h1 class="visually-hidden">Виртуальная клавиатура</h1>
    <section class="computer">
      <div class="display-wrapper">
        <div class="display"></div>
      </div>

2. JS

let elementDisplay = document.querySelector('.display');
let elementKeys = document.querySelectorAll('.key');
let elementClear = document.querySelector('.clear');

/* Обработка нажатия клавиш */  

for (let elementKey of elementKeys) { 
  elementKey.onclick = function() {
  if (elementKey.classList.contains('space')) {   // Если нажат пробел
  elementDisplay.append(' ');
  } else {   //  Если все остальные кнопки
  elementDisplay.append(elementKey.innerHTML);
  }; 
  };
};

/* Очистка дисплея */ 

   elementClear.onclick = function() {
   elementDisplay.textContent = '';
};
2 лайка
2

У меня, как-то так вышло:

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

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

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