Генерация четырех случайных чисел и добавление их в DOM

Question

Я практикую свои знания базового JavaScript, и это мой первый проект.вот в чем проблема:

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

Я закончил кеширование DOM с помощью querySelecter и прослушиваю нажатие клавиши для кнопки.

let randNum;
const numArr = [];
const box = document.querySelector('.box');

function genNum (e) {

  const button = document.querySelector(`.button[data-key="${e.keyCode}"]`);
  if(!button) return;

  numArr.forEach(numbers => {
    randNum = Math.floor(Math.random() * 10)
  });
};

window.addEventListener('keydown', genNum)

Основная цель - сгенерировать 4 случайных числа от 0 до 9,и добавьте его в окно вызова DOM.Всякий раз, когда пользователь нажимает на пробел, они будут видеть любые случайные числа на передней панели

Answer 1

Я предполагаю, что вы намереваетесь добавить числа к элементу DOM с классом box (т.е. .box).

Некоторые указатели:

1. const box на самом деле массив .Таким образом, const box будет указывать не на элемент DOM .box, а на массив, содержащий все совпадения с элементами DOM с именем класса box .(В конце концов, классы не уникальны, в отличие от идентификаторов).

   ^ Я предполагаю, что это ваша проблема, и чтобы решить ее и получить фактический элемент DOM, вы можете использовать const box = document.querySelector('.box')[0]; или const box = document.getElementsByClassName('box')[0];.(На самом деле вы получаете первый элемент DOM, соответствующий чему-то с классом box )

2. Как уже упоминали многие пользователи, вы перебираете пустой массивnumArr.Используйте простой цикл for Math.random(). (см. Код ниже)

3. Я не знаю, почему вы решили использовать код const button = document.querySelector( .button [data-key = "$ {e.keyCode} "] ); чтобы проверить нажатие клавиши пробела.Вместо этого используйте if(e.keyCode != 32) return; //32 is the keycode for space.

4. В качестве хорошей практики используйте keyup вместо keydown (window.addEventListener('keyup', genNum)), так как keydown будет срабатывать до тех пор, пока пробел будет нажат вниз.

OVERALL

let randNum;
const box = document.querySelector('.box')[0]; //alternatively, document.getElementsByClassName('box')[0];

function genNum (e) {
    if(e.keyCode != 32) return; //32 is ASCII code for spacebar.

    //Actual appending of text to the DOM element box. 
    //Here I assume that your box is empty; otherwise adding numbers will just override whatever is inside the box
    box.innerHTML = '';
    let i = 0;
    const nNums = 4;
    for(i=0;i<nNums;i++){
        randNum = Math.floor(Math.random() * 10);
        box.innerHTML += randNum+" ";
    }
};

window.addEventListener('keydown', genNum)

Answer 2

Ваш numArr пуст, поэтому его .forEach() не принесет много пользы.Я думаю, вы хотите всегда считать до 4.

const box = document.querySelector('.box');

function genNum (e) {
  const button = document.querySelector(`.button[data-key="${e.keyCode}"]`);
  if(!button) return;
  
  for (var i = 0; i < 4; i++) {
    box.textContent += Math.floor(Math.random() * 10) + ","
  }
}

window.addEventListener('keydown', genNum)

<input type=hidden class=button value=spacebar data-key=32>
<div class=box></div>