Reassign a variable with a random number upon meeting condition (vanilla Javascript)-CodePudding

I would like to know how to generate a new random number once the condition of the if statement is met. Once the length of the array reaches 3, reassign the "randomNumber" variable a new number. As of now I don't see any changes when the randomNumber variable is logged to the console and the condition is met, the number doesn't change without refreshing the page.

let randomNumber = Math.floor(Math.random() * 100);

console.log(randomNumber);

const numberArr = [];

const form1 = document.getElementById("form1");

if (numberArr.length === 3) {
        numberArr.splice(0, 3);
        randomNumber = Math.floor(Math.random() * 100);
};

form1.addEventListener("submit", e => {
    const values = document.getElementsByName("number")[0].value;
    numberArr.push(values);
    e.preventDefault();
    form1.reset();
});

          <form id="form1">

                <div >

                    <div >
                            <input type="number" name="number" id="number" min="1" max="100">
                    </div>

                    <div >
                        <button type="submit" form="form1" id="sub1">Submit</button>
                    </div>

                </div>

        </form>

CodePudding user response：

the code you have written checks if the array has 3 elements on page load which is never the case, and doesnt rerun later. So in order to fix this just put the if statement inside the event listener and it should work as you expected.

let randomNumber = Math.floor(Math.random() * 100);

console.log(randomNumber);

const numberArr = [];

const form1 = document.getElementById("form1");

form1.addEventListener("submit", e => {
    const values = document.getElementsByName("number")[0].value;
    numberArr.push(values);
    e.preventDefault();
    if (numberArr.length === 3) {
        numberArr.splice(0, 3);
        randomNumber = Math.floor(Math.random() * 100);
        console.log(randomNumber);
       };
    form1.reset();
});

<form id="form1">

                <div >

                    <div >
                            <input type="number" name="number" id="number" min="1" max="100">
                    </div>

                    <div >
                        <button type="submit" form="form1" id="sub1">Submit</button>
                    </div>

                </div>

        </form>

CodePudding user response：

This is because you're not checking the condition each time the user submits the form, but only once in the page scope (when the page is loading).

let randomNumber = Math.floor(Math.random() * 100);
console.log(randomNumber);

const numberArr = [];

const form1 = document.getElementById("form1");
form1.addEventListener("submit", e => {
  e.preventDefault();
  
  const values = document.getElementsByName("number")[0].value;
  numberArr.push(values);
  form1.reset();
  
  if (numberArr.length === 3) {
    numberArr.splice(0, 3);
    randomNumber = Math.floor(Math.random() * 100);
        console.log(randomNumber);
  }
});

  <form id="form1">
    <div >
      <div >
        <input type="number" name="number" id="number" min="1" max="100">
      </div>
      <div >
        <button type="submit" form="form1" id="sub1">Submit</button>
      </div>
    </div>
  </form>

Also, numberArr doesn't make sense in this code, cause you can use a simple counter and increase it by 1 each time the form is submitted, and reset it after the condition is met.

CodePudding user response：

Check within the handler function (so: every time the button is clicked). Here's a simplified snippet, using event delegation.

document.addEventListener(`click`, handle);
let randomNumber = Math.floor(Math.random() * 100);
console.log(`initial ${randomNumber}`);
let numberArr = [];

function handle(evt) {
  if (evt.target.id === `sub1`) {
    numberArr.push( document.querySelector(`#number`).value ?? 0);
    const len = numberArr.length;
    if (numberArr.length === 3) {
      randomNumber = Math.floor(Math.random() * 100);
      numberArr = [];
    }
    return console.log(randomNumber);
  }
}

<div >

  <div >
    <input type="number" name="number" id="number" min="1" max="100">
  </div>

  <div >
    <button type="submit" form="form1" id="sub1">Submit</button>
  </div>

</div>