Question

我正在学习有关基本JavaScript的知识，这是我的第一个项目。这是问题所在：

我喜欢生成一个随机数4并将其附加到DOM，因此，每当用户按下空格键时，都会生成一个随机数4，该数字对于网站是可见的，而不必查看控制台。

我已经完成了使用querySelecter缓存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)

主要目的是生成0到9之间的4个随机数，并将其附加到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 （即.box）的DOM元素上。

一些指针：

const box实际上是一个数组。因此，const box不会指向DOM元素.box，而是指向包含所有与DOM匹配的数组类名称为 box 的元素。（毕竟，上课不是唯一，与ID不同）。

^我认为这是您的问题，请解决此问题并获取实际的DOM元素，您可以使用 const box = document.querySelector('.box')[0];或 const box = document.getElementsByClassName('box')[0];。（实际上，您正在做的是第一个与类 box 匹配的DOM元素）
正如许多用户所提到的，您正在遍历一个空数组numArr。使用simple for循环和Math.random()。 （请参见下面的代码）
我不知道您为什么决定使用代码const button = document.querySelector(。button [data-key =“ $ {e.keyCode}”] );检查空格键。请改用if(e.keyCode != 32) return; //32 is the keycode for space。
作为一种好习惯，请使用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)

生成四个随机数并将其附加到DOM

2 个答案: