javascript - 单击按钮时如何生成一组数组，而不会使第一个消失？

问题描述

我正在努力学习js。我通过生成 6 个组合数字开始玩数组。这是有效的，但是当我单击按钮时，我不知道如何输出其他组合。任何评论表示赞赏。谢谢

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" href="css/css/bootstrap.css">
        <link rel="stylesheet" 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>

标签： javascriptarraysloops

累积结果

一个简单而粗略的解决方案是在当前文本后面加上<br>换行符：

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

但众所周知，随着文本变大，这种方法的性能会很差。

如果将 p 元素更改为：

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

并将脚本替换document.getElementById("ok").innerHTML = arr;为：

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

并添加 css：

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

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

那么你应该有一些工作。

还有一些问题需要解决：

数学随机（）

该函数Math.random()不带参数，因此您的变量x没有任何效果。如果打算将 x 和 y 作为最小值和最大值，请尝试从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;
}

min是包容的，而是max排他的。如果x = 0和y = 10，并且您希望范围为 [0-10]，则可以执行getRandomInt(x, y + 1). 确保min不大于max。

防止无限循环

如果可能的唯一整数的数量小于它结束所需的数组元素的数量，你的循环将被卡住。

javascript - 单击按钮时如何生成一组数组，而不会使第一个消失？

问题描述

解决方案

累积结果

数学随机（）

防止无限循环

更多用户输入语义

推荐阅读