使用 Vanilla JavaScript 从输入文本中获取更新的值答案

【问题标题】：Getting updated value from Input text using Vanilla JavaScript使用 Vanilla JavaScript 从输入文本中获取更新的值
【发布时间】：2021-11-14 17:26:38
【问题描述】：

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

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

我想提醒用户如果他们在点击生成按钮之前反之亦然。表示是否有任何用户在 maxValue 输入中输入最小值，在 minValue 输入中输入最大值。一旦用户停止，我只想提醒它。我知道点击生成按钮后可以轻松完成，但只是为了学习目的，我想以这种方式执行操作。

现在我在程序开始时得到变量 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);

<div class="outer-box">
  <div class="generator-box">
    <h1> Random Number Generator </h1>
    <div class="inputs">
      <label for="min">Min Value:</label>
      <input type="number" id="min" name="min" placeholder="Enter min value"><br><br>
      <label for="max">Max Value:</label>
      <input type="number" id="max" name="max" placeholder="Enter max value"><br><br>
    </div>
    <span class=random-number>Click to generate</span>
    <hr>
    <div class="buttons">
      <button class='button1'>Generate</button>
    </div>
  </div>
</div>

谢谢

【问题讨论】：

只需读取函数内的输入值。
@RobbyCornelissen 但是如果我想在点击“生成”按钮之前知道这两个输入的值怎么办？
只要在需要时检索值即可。您可以根据需要多次读取该值...
@RobbyCornelissen 我想提醒用户，如果他们在点击生成按钮之前将值反之亦然。表示是否有任何用户在 maxValue 输入中输入最小值，在 minValue 输入中输入最大值。一旦用户停止，我只想提醒它。我知道点击生成按钮后可以轻松完成，但只是为了学习目的，我想以这种方式执行操作。
您可以为这些输入字段订阅change事件，当其中的值被修改（即字段失去焦点）时触发函数。input事件类似，但在用户仍在输入值时已经触发。

标签： javascript html html-input

【解决方案1】：

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

如果你想在点击按钮之前，那么你需要添加最小和最大文本框 onchange 事件并编写你的逻辑

请检查以下方式

<button class='button1' onclick="generateRandomNumber()">Generate</button>

这是你的函数逻辑。

<script>
    function generateRandomNumber() {
     const numberGenerator = document.querySelector(".random-number");
     const button = document.querySelector(".button1");
     const minValue = document.querySelector("#min").value;
     const maxValue = document.querySelector("#max").value;
     randomNumber = Math.floor(Math.random() * (maxValue-minValue)) + minValue
     numberGenerator.innerHTML = randomNumber;
    }
</script>

【讨论】：

【解决方案2】：

要获得您必须输入的更新值

const minValue = document.querySelector("#min").value;
const maxValue = document.querySelector("#max").value;

里面

let generateRandomNumber = () => {...}

如果你把它放在generateRandomNumber之外，那么它会在页面加载时设置输入的值，如果你把它放在generateRandomNumber中，那么它会在调用该函数时重新分配

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");


let generateRandomNumber = () => {
    var min = document.querySelector("#min").value;
    var max = document.querySelector("#max").value;
    
    min = Math.ceil(min);
    max = Math.floor(max);
    randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    numberGenerator.innerHTML = randomNumber;
};

button.addEventListener("click", generateRandomNumber);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="outer-box">
        <div class="generator-box">
            <h1> Random Number Generator </h1>
            <div class="inputs">
                <label for="min">Min Value:</label>
                <input type="number" id="min" name="min" placeholder="Enter min value"><br><br>
                <label for="max">Max Value:</label>
                <input type="number" id="max" name="max" placeholder="Enter max value"><br><br>
            </div>
            <span class=random-number>Click to generate</span>
            <hr>
            <div class="buttons">
                <button class='button1'>Generate</button>
            </div>
        </div>
    </div>
    <script src='random_number_generator.js'></script>
</body>
</html>

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

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
const error = document.querySelector(".error");
const minInput = document.getElementById("min");
const maxInput = document.getElementById("max");

var min = 0;
var max = 0;

maxInput.oninput = valueDetected;
minInput.oninput = valueDetected;

function valueDetected(){
  console.log("Max: "+maxInput.value+" & Min: "+minInput.value)
}

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


button.addEventListener("click", generateRandomNumber);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="outer-box">
        <div class="generator-box">
            <h1> Random Number Generator </h1>
            <div class="inputs">
                <label for="min">Min Value:</label>
                <input type="number" id="min" name="min" placeholder="Enter min value" value=0><br><br>
                <label for="max">Max Value:</label>
                <input type="number" id="max" name="max" placeholder="Enter max value" value=0><br><br>
            </div>
            <span class=random-number>Click to generate</span>
            <hr>
            <div class="buttons">
                <button class='button1'>Generate</button>
        </div>
    </div>
    <script src='random_number_generator.js'></script>
</body>
</html>

已验证的

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
const error = document.querySelector(".error");
const minInput = document.getElementById("min");
const maxInput = document.getElementById("max");

var min = 0;
var max = 0;

maxInput.oninput = checkValid;
minInput.oninput = checkValid;

function checkValid(){
  if(parseInt(maxInput.value) < parseInt(minInput.value)){
    button.style.display = "none"; 
    error.style.display = "block";
  }
  else {
    button.style.display = "block"; 
    error.style.display = "none";
    min = minInput.value;
    max = maxInput.value;
  }
}

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


button.addEventListener("click", generateRandomNumber);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="outer-box">
        <div class="generator-box">
            <h1> Random Number Generator </h1>
            <div class="inputs">
                <label for="min">Min Value:</label>
                <input type="number" id="min" name="min" placeholder="Enter min value" value=0><br><br>
                <label for="max">Max Value:</label>
                <input type="number" id="max" name="max" placeholder="Enter max value" value=0><br><br>
            </div>
            <span class=random-number>Click to generate</span>
            <hr>
            <div class="buttons">
                <button class='button1'>Generate</button>
                <span class="error" style="color: red; display: none;">You Cannot Put A  Maximum Value Less Than The Minimum Value</span>
            </div>
        </div>
    </div>
    <script src='random_number_generator.js'></script>
</body>
</html>

【讨论】：

有没有什么方法可以让我在不点击生成按钮的情况下不断获取这些输入字段的更新值？这可能是一个幼稚的问题，但只是出于好奇。
您的意思是在点击按钮之前获取值吗？
是的！，当用户开始在字段中输入时，我应该只得到那个时候的值。
现在看到我已经更新了我的答案

【解决方案3】：

仅创建引用元素的变量，例如。 minInput，maxInput，
为元素添加事件监听器。 'click' 为按钮，'change' 为输入，
使用parseInt 并将输入值存储在变量中，
检查其中是否有任何一个是 NaN（不是数字），
生成一个数字，两个输入都有数字。

如果我是你，我也会同时提供按钮和 .random-number 跨度唯一 ID，以提示它们在 javascript 代码中被引用。

const numberGenerator = document.querySelector(".random-number");
const generateButton = document.querySelector(".button1");
const minInput = document.getElementById("min");                 // 1
const maxInput = document.getElementById("max");                 // 1

generateButton.addEventListener('click', generateRandomNumber);  // 2
minInput.addEventListener('change', generateRandomNumber);       // 2
maxInput.addEventListener('change', generateRandomNumber);       // 2

function generateRandomNumber() {
  let min = parseInt(minInput.value);                            // 3
  let max = parseInt(maxInput.value);                            // 3
  const BOTH_INPUTS_GOT_VALUES = !isNaN(min) && !isNaN(max);     // 4
  
  if (BOTH_INPUTS_GOT_VALUES) {                                  // 5
    randomNumber = Math.floor(Math.random() * (max - min)) + min;
    numberGenerator.innerHTML = randomNumber;
  }
}

.inputs {
  margin-bottom: 1rem;
}

<div class="outer-box">
  <div class="generator-box">
    <h1> Random Number Generator </h1>
    <div class="inputs">
      <label for="min">Min Value:</label>
      <input type="number" id="min" name="min" placeholder="Enter min value">
      
      <label for="max">Max Value:</label>
      <input type="number" id="max" name="max" placeholder="Enter max value">
      
    </div>
    <span class=random-number>Click to generate</span>
    <hr>
    <div class="buttons">
      <button class='button1'>Generate</button>
    </div>
  </div>
</div>

【讨论】：