Ad

How To Generate Set Of Arrays When Clicking Button, Without Disappearing The First One?

- 1 answer

Im trying to learn js. Im starting playing with array by generating 6 combination numbers. This is working but i dont know how to output another combinations when I click the button. Any comment is appreciated. THanks

function getRandomNumber() {
				
  var x = document.getElementById("num1").value;
  var y = document.getElementById("num2").value;

  var arr = [];
   while(arr.length < 8){
   var myrandomnumber = Math.floor(Math.random(x) * y + 1);
   if(arr.indexOf(myrandomnumber) === -1) arr.push(myrandomnumber);
    
  }

  if (x==""){
    alert("Please enter a number");
  }
  else if (y==""){
    alert("Please enter a number");
  }
  else{
    document.getElementById("ok").innerHTML = arr; 
  }
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>RANDOM NUMBER JS</title>
        <meta name="" content="">
        <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="css/css/bootstrap.css">
        <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="css/cssextra/csse1.css">
        
        
        <script src="customscript.js"></script>
        </head>
    
    <body class="bg-light">
    <br>
    <p id="demo">Random Number</p>

    <br><br>
    <input type="number" id="num1" name="one"/  >
    <input type="number" id="num2" name="two"/  >
    <button onclick="getRandomNumber();">Generate random number</button >
    <p id="ok"></p><br>
    <p id="okok"></p>
        
    </body>
</html>

Ad

Answer

Accumulate results

A easy yet crude solution would be appending the current text with <br> for line breaks:

const p = document.getElementById("ok");
p.innerHTML = p.innerHTML + (p.innerHTML === "" ? "" : "<br>") + arr.join(", ");

But this approach will notoriously perform badly as the text grows larger.

If you change the p elements into:

<div id="ok" class="text-container">

And replace the script's document.getElementById("ok").innerHTML = arr; into:

const p = document.createElement("p");
p.textContent = arr.join(", ");
document.getElementById("ok").appendChild(p);

And add css:

.text-container {
    margin-top: 1em;
}

.text-container > p {
    margin: 0;
}

Then you should have something working.

Also there are some things to address:

Math.random()

The function Math.random() does not take arguments, so your variable x does not have any effect. If the intention is to x and y as a minimum and maximum value, try this from Math.random() - JavaScript | MDN:

function getRandomInt(min, max) {
  var min = Math.ceil(min);
  var max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

The min is inclusive and the max is exclusive. If x = 0 and y = 10, and you want the range to be [0-10], you can do getRandomInt(x, y + 1). Make sure min is not greater than max.

Prevent infinite loop

Your loop will get stuck if the amount of possible unique integers is smaller than the number of array elements required for it to end.

More user input semantics

Variables x and y are tested before writing out the numbers, but after they have already been used to generate the numbers. In other words, the number creation process should be moved into the else block.

Ad
source: stackoverflow.com
Ad