CODEWITHSUNDEEP
javascripthtmlhtml-input
Ram Shankar Kumar
Ram Shankar Kumar

Reputation: 73

Getting updated value from Input text using Vanilla JavaScript

Background -
I am new to JavaScript world and working on a small application to generate random number between a range. Two Inputs are taken by the user i.e. "minValue" and "maxValue" of the range and random number is generated by clicking on the "Generate" button.

Question -
How can I get the input from these two number fields when it gets updated again and again using vanilla JavaScript without any framework ?

I want to alert the user if they put the value vice versa before hitting generate button. Means if any user put minimum value in maxValue input and maximum value in minValue input. As soon as user stops I just want to make a alert for it. I know it can be done easily after hitting generate button but just for learning purpose I want to perform the operation this way.

Right now I am getting blank value of variable MinValue and maxValue at the beginning of the program and after that value is not updated by changing number field value.

enter image description here

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>

Thank you

Upvotes: 1

Views: 1521

Answers (3)

nxt
nxt

Reputation: 436

To Get The Updated Value You Have To Put

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

Inside

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

If You Put It Outside of generateRandomNumber then it will set the values of inputs when the page is loaded And If You Put It In The generateRandomNumber then It will reassign when that function is called

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>

Update : Get The Updated Value On Input ( Before Pressing The Button )

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>

Validated One

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>

Upvotes: 1

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

  1. Only create variables that references the elements, ex. minInput, maxInput,
  2. add event listeners to the elements. 'click' for the button and 'change' for the inputs,
  3. use parseInt and store the input values in variables,
  4. check if any of them is NaN (not a number),
  5. generate a number of both inputs have numbers.

If I were you, I would give both the button and the .random-number span unique ids too, in order to hint that they are referenced in javascript code.

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>

Upvotes: 1

Malvik Bhavsar
Malvik Bhavsar

Reputation: 440

You need to add onclick event in button and call funcation.

And if you want before clicking the button then you need to add min and max textbox onchange event and write your logic

please check following way

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

And this your logic in funcation.

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

Upvotes: 0

Related Questions