生成4张随机数，并追加到DOM

Question

我练上基本的JavaScript我所知，这是我第一次的项目。这里的问题：

我想产生的四个随机数，并追加到DOM，所以每当用户按空格键的四个随机数将产生，并可见的网站，而不是看控制台。

我做使用querySelecter和监听的keydown的按钮缓存DOM。

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

你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>

Answer 2

我假设你打算将数字追加到带班箱（即.box）的DOM元素。

一些指针：

1. const box实际上是一个数组。因此，const box不会朝向DOM元素.box点，而是包含所有比赛的阵列，以DOM与类名框元件。 （毕竟，班不是唯一的，不同的ID）。 ^我认为这是你的问题，并解决它，并得到实际的DOM元素，你可以使用const box = document.querySelector('.box')[0];或const box = document.getElementsByClassName('box')[0];。 （你实际上是在做什么越来越第一DOM元素与类箱匹配的东西）
2. 正如很多网友都提到，你遍历一个空数组numArr。使用简单的for循环和Math.random()代替。 （参见下面的代码）
3. 我不知道为什么你决定使用代码const button = document.querySelector(.button [数据键=“$ {} e.keyCode”] );，检查是否有空格按键。使用if(e.keyCode != 32) return; //32 is the keycode for space代替。
4. 作为一个很好的做法，使用KEYUP代替的keydown（window.addEventListener('keyup', genNum)）的，为的keydown会随着空间被向下按压，只要触发。

总体

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)