Скрыть ли и показать, когда вы остаетесь, нажмите клавишу "Z"

Question

Я хочу скрыть <li></li>, которые создаются в HTML при открытии страницы и при нажатии клавиши, я хотел бы, чтобы они появлялись.

Или

Создание функция, которая создает определенное число <li></li> при нажатии клавиши на клавиатуре.

В обоих случаях я вообще не знаю, как начать.

Answer 1

Вот фрагмент кода, который делает то, что вы ищете

Список не отображается по умолчанию из-за CSS display: none

Я использовал Javascript для создания прослушиватель событий по любой нажатой клавише. Когда клавиша нажата, список появится. Более того, если нажата клавиша z, фон списка станет синим;

document.addEventListener("keypress", handleKeyPress);

function handleKeyPress(e) {
  document.getElementById('list').classList.add('display-the-list');
  
  if(e.key === 'z') {
    document.getElementById('list').classList.add('cyan-bg');
  }
}

#list {
  display: none
}

#list.display-the-list {
  display: block;
}

#list.cyan-bg {
  background: cyan;
}

<h1>Press any key !</h1>

<ul id="list">
  <li>Hello there !</li>
  <li>I appeared beacause</li>
  <li>You pressed a key</li>
</ul>