генератор случайных чисел с интерактивной переменной - PullRequest
Новая
       39

генератор случайных чисел с интерактивной переменной

1 голос
/ 24 января 2020 

const inputMin = document.getElementById('min');  
const inputMax = document.getElementById('max');
const done = document.getElementById('value');
const rGen = document.getElementById('rGen');

let min = 1;
let max = 100;

inputMin.addEventListener('input', updateValue);
function updateValue(ef) {
    min = + ef.target.value ;      
}
inputMax.addEventListener('input', updateValue1);

function updateValue1(e) {
    max = + e.target.value;

}
    function randomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);

}

rGen.addEventListener('submit', (e) => {

    done["innerText"] = randomNumber(min, max);

    e.preventDefault()


});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>generator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
    <body>

 <form id="rGen" class="form">
    <h1>Click generate </bold></h1>
    <label
            for="min">od
    </label>
    <input type="number" id="min" placeholder='1'>
    <label for="max">do</label>
    <input type="number" id="max" placeholder="100"  size="10"> <br>
    <button class="butt">GENERATE</button>
    <div id="value">
        7
    </div>
 </form>
</body>
   </html>

Может ли кто-нибудь помочь мне с этим маленьким грязным кодом, но я хочу поменять эти два, если Мин > Макс потому что, когда min> чем max, код все еще работает и дает неправильные числа, или какие-либо советы, как сделать его чище. Большое спасибо

Ответы [ 2 ]

0 голосов
/ 27 января 2020

Спасибо, Аарон, я наконец-то заставил его работать так, как я хотел. Теперь, когда я ставлю в min большее число, чем max, он автоматически переключает их и дает хороший результат, спасибо :) 

const inputMin = document.getElementById('min');
const inputMax = document.getElementById('max');
const done = document.getElementById('value');
const rGen = document.getElementById('click');



let min = 1;
let max = 10;

     inputMin.addEventListener('input', updateValue);
        function updateValue(e) {
         
            min = +e.target.value;
    }
    inputMax.addEventListener('input', updateValue1);
      function updateValue1(e) {
          
            max = +e.target.value;
    }
    
function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
}

rGen.addEventListener('click', (e) => {
    if (min > max) {
        [min, max] = [max, min];

        inputMax.value = max;
        inputMin.value = min;
    
        done.innerText = randomNumber(min, max);
    }
    else {
        done.innerText = randomNumber(min, max);
    }
    
        e.preventDefault()
    });
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>generator</title>
	<link rel="stylesheet" type="text/css" href="texts.css">

</head>
<body>
        <div>
				<div class="Rgen-num" id="value">

				</div>

				<div class="Rgen-pick">
					<div class="upper-text">
						min
					</div>
					
						<input id="min" value="1" min="-99999999999999" max="99999999999999" type="number">

					</div>
					<div class="upper-text">
						max
					</div>
					
						<input id="max" value="10" min="-99999999999999" max="99999999999999" type="number">
					
				
			</div>
			<div class="bot-Rgen" id="click">
				<div class="bot-Rgen-text" style="cursor:pointer;color:red;">
				Click me to GENERATE
				</div>
        </div>

<script src="js/script1.js"></script>

</body>
</html>
0 голосов
/ 24 января 2020

Перед вызовом randomNumber добавьте проверку, если min больше max. Если это так, переключите их. 

const inputMin = document.getElementById('min');
const inputMax = document.getElementById('max');
const done = document.getElementById('value');
const rGen = document.getElementById('rGen');

let min = 1;
let max = 100;

inputMin.addEventListener('input', updateValue);

function updateValue(ef) {
  min = +ef.target.value;
}
inputMax.addEventListener('input', updateValue1);

function updateValue1(e) {
  max = +e.target.value;
}

function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

rGen.addEventListener('submit', (e) => {
  if (min > max) {
    var temp = min;
    min = max;
    max = temp;
  }

  done["innerText"] = randomNumber(min, max);

  e.preventDefault()
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>generator</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <form id="rGen" class="form">
      <h1>Click generate </bold>
      </h1>
      <label for="min">od
      </label>
      <input type="number" id="min" placeholder='1'>
      <label for="max">do</label>
      <input type="number" id="max" placeholder="100" size="10"> <br>
      <button class="butt">GENERATE</button>
      <div id="value">
        7
      </div>
    </form>
  </body>
</html>

Или просто используйте rando js .com . Он обрабатывает случаи, когда max> max автоматически. 

let min = 1;
let max = 100;

document.getElementById('min').addEventListener('input', function(e) {
  min = Number(e.target.value);
});

document.getElementById('max').addEventListener('input', function(e) {
  max = Number(e.target.value);
});

document.getElementById('rGen').addEventListener('submit', function(e) {
  e.preventDefault();
  document.getElementById('value')["innerText"] = rando(min, max);
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>generator</title>
    <script src="https://randojs.com/1.0.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <form id="rGen" class="form">
      <h1>Click generate </bold>
      </h1>
      <label for="min">od
      </label>
      <input type="number" id="min" placeholder='1'>
      <label for="max">do</label>
      <input type="number" id="max" placeholder="100" size="10"> <br>
      <button class="butt">GENERATE</button>
      <div id="value">
        7
      </div>
    </form>
  </body>
</html>

Если вы решите использовать rando js, убедитесь, что у вас есть этот тег сценария в заголовке вашего html документа : 

<script src="https://randojs.com/1.0.0.js"></script>
...