具有交互变量的随机数生成器答案

【问题标题】：random number generator with interactive variable具有交互变量的随机数生成器
【发布时间】：2020-05-10 12:33:26
【问题描述】：

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>

有人可以帮我解决这个杂乱无章的代码吗及其给出错误的数字，或任何如何使其更清洁的建议。非常感谢

【问题讨论】：

您的代码运行正常，您的问题是什么
输入51作为最小值，50作为最大值，你会看到
绝对！乐于助人。

标签： javascript random numbers generator

【解决方案1】：

在调用randomNumber 之前，添加检查最小值是否大于最大值。如果是，请切换它们。

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>

或者只使用randojs.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>

如果您选择使用randojs，请确保您的 html 文档头部有这个脚本标签：

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

【讨论】：

【解决方案2】：

谢谢 aaron，我终于让它按我的意愿工作了，现在当我输入比 max 大的 min 时，它会自动切换它们并给你很好的结果，谢谢 :)

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>

【讨论】：

太棒了！很高兴听到它