背景- 我是JavaScript领域的新手，正在开发一个小应用程序来生成一个范围之间的随机数。用户接受两个输入，即范围的“minValue”和“maxValue”，并通过单击“Generate”按钮生成随机数。

问题- 在没有任何框架的情况下，使用vanilla JavaScript一次又一次地更新这两个数字字段的输入时，如何获得输入？

我想提醒用户，如果他们在点击generate按钮之前输入了值，反之亦然。表示任何用户在maxValue输入中输入最小值，在minValue输入中输入最大值。一旦用户停止，我只想为它发出警报。我知道点击generate按钮后可以很容易地完成，但为了学习，我想用这种方式执行操作。

现在，在程序开始时，我得到了变量MinValue和maxValue的空值，在此之后，该值不会通过更改number字段值来更新。

谢谢

---

顺晟科技：

您需要在按钮和调用功能中添加onclick事件。

如果您想在单击按钮之前添加最小和最大文本框onchange事件并编写逻辑

请检查以下方式

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
const minValue = document.querySelector("#min").value;
const maxValue = document.querySelector("#max").value;

// console.log(numberGenerator);
// console.log(button);
//console.log(minValue);
//console.log(maxValue);

let generateRandomNumber = (max, min) => {
  randomNumber = Math.floor(Math.random() * (max - min)) + min
  numberGenerator.innerHTML = randomNumber;
};

button.addEventListener("click", generateRandomNumber, minValue, maxValue);

这是您在功能中的逻辑。

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
const minValue = document.querySelector("#min").value;
const maxValue = document.querySelector("#max").value;

// console.log(numberGenerator);
// console.log(button);
//console.log(minValue);
//console.log(maxValue);

let generateRandomNumber = (max, min) => {
  randomNumber = Math.floor(Math.random() * (max - min)) + min
  numberGenerator.innerHTML = randomNumber;
};

button.addEventListener("click", generateRandomNumber, minValue, maxValue);

1. 只创建引用元素的变量，例如。，，
2. 向元素添加事件侦听器。按钮为'click'，输入为'change'，
3. 在变量中使用并存储输入值，
4. 检查其中是否有NaN（不是数字），
5. 生成两个输入都有数字的数目。

如果我是您，我也会给出按钮和span唯一的ID，以提示它们在javascript代码中被引用。

要获得更新的值，必须将

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
const minValue = document.querySelector("#min").value;
const maxValue = document.querySelector("#max").value;

// console.log(numberGenerator);
// console.log(button);
//console.log(minValue);
//console.log(maxValue);

let generateRandomNumber = (max, min) => {
  randomNumber = Math.floor(Math.random() * (max - min)) + min
  numberGenerator.innerHTML = randomNumber;
};

button.addEventListener("click", generateRandomNumber, minValue, maxValue);

内部

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
const minValue = document.querySelector("#min").value;
const maxValue = document.querySelector("#max").value;

// console.log(numberGenerator);
// console.log(button);
//console.log(minValue);
//console.log(maxValue);

let generateRandomNumber = (max, min) => {
  randomNumber = Math.floor(Math.random() * (max - min)) + min
  numberGenerator.innerHTML = randomNumber;
};

button.addEventListener("click", generateRandomNumber, minValue, maxValue);

如果将它放在then之外，它将在加载页面时设置输入值，如果将它放在then中，它将在调用该函数时重新分配值

update:在输入时获取更新的值（在按下按钮之前）

已验证