Как сгенерировать набор массивов при нажатии кнопки, не пропуская первый? - PullRequest
Новая
       11

Как сгенерировать набор массивов при нажатии кнопки, не пропуская первый?

0 голосов
/ 29 апреля 2020

Я пытаюсь выучить 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>

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Накапливать результаты

Простое, но грубое решение - добавить текущий текст с помощью <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 ()

Функция 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.

Предотвратить бесконечность l oop

Ваш l oop застрянет, если количество возможных уникальных целых чисел меньше, чем количество элементов массива, необходимых для его завершения.

Больше семантики пользовательского ввода

Переменные x и y проверяются перед записью чисел, , но после они уже были использованы для генерации чисел. Другими словами, процесс создания номера следует перенести в блок else.

0 голосов
/ 29 апреля 2020

innerHTML ожидает строку, и вы устанавливаете массив.

use document.getElementById("ok").innerHTML = arr.join(' ');

это объединит каждый элемент в массиве с пробелом как клей

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...