Блог

Главная - Вопросы по программированию - Получение обновленного значения из входного текста с помощью ванильного JavaScript

Получение обновленного значения из входного текста с помощью ванильного JavaScript

#javascript #html #html-input

Вопрос:

Предыстория —
Я новичок в мире JavaScript и работаю над небольшим приложением для генерации случайных чисел между диапазонами. Пользователь вводит два значения, т. е. «Минимальное значение» и «Максимальное значение» диапазона, и случайное число генерируется нажатием кнопки «Сгенерировать».

Вопрос —
Как я могу получить входные данные из этих двух числовых полей, когда они обновляются снова и снова, используя ванильный JavaScript без каких-либо рамок ?

Я хочу предупредить пользователя, если он изменит значение наоборот, прежде чем нажать кнопку «Создать». Означает, что если какой-либо пользователь ввел минимальное значение во входное значение Max и максимальное значение во входное значение 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>

Спасибо

Комментарии:

1. Просто прочитайте входные значения внутри вашей функции.

2. @RobbyCornelissen Но что, если я хочу знать значение этих двух входных данных, прежде чем нажимать кнопку «Создать»?

3. Просто извлеките значение в любое время, когда оно вам понадобится. Вы можете прочитать значение столько раз, сколько захотите…

4. @RobbyCornelissen Я хочу предупредить пользователя, если он изменит значение наоборот, прежде чем нажать кнопку «Создать». Означает, что если какой-либо пользователь ввел минимальное значение во входное значение Max и максимальное значение во входное значение MinValue. Как только пользователь остановится, я просто хочу сделать предупреждение об этом. Я знаю, что это можно легко сделать после нажатия кнопки «Создать», но просто для целей обучения я хочу выполнить операцию таким образом.

5. Вы можете подписаться на change событие для этих полей ввода, чтобы запустить функцию, когда значение внутри них было изменено (т. Е. поле теряет фокус). input Событие аналогично, но уже срабатывает, когда пользователь все еще вводит значение.

Ответ №1:

  1. Создавайте только переменные, которые ссылаются на элементы , например minInput , maxInput ,
  2. добавьте прослушиватели событий в элементы. «нажмите» для кнопки и «измените» для входных данных,
  3. используйте parseInt и сохраняйте входные значения в переменных,
  4. проверьте, является ли какой-либо из них NaN (не числом),
  5. сгенерируйте число, на обоих входах которого есть числа.

На вашем месте я бы тоже дал уникальные идентификаторы кнопки и .random-number диапазона, чтобы намекнуть, что на них есть ссылки в коде 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) amp;amp; !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>

Ответ №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 " amp; 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>

Комментарии:

1. И есть ли какой-нибудь способ, чтобы я просто продолжал получать обновленные значения этих полей ввода, не нажимая кнопку «Создать»? Возможно, это наивный вопрос, но он задан просто из любопытства.

2. Вы Имеете В Виду Получить Значения, Прежде Чем Нажимать На Кнопки?

3. Да !! , когда пользователь начнет вводить текст в поле, я должен получить значение только в это время.

4. Теперь Видите, Я Обновил Свой Ответ

Ответ №3:

Вам нужно добавить событие onclick в кнопку и вызвать функцию.

И если вы хотите, чтобы перед нажатием кнопки вам нужно добавить минимальное и максимальное текстовое поле в событие обмена и написать свою логику

пожалуйста, проверьте следующим образом

 <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>
Метки: