时间戳

首页 > 解决方案 > 具有交互变量的随机数生成器

javascript - 具有交互变量的随机数生成器

问题描述

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，我想切换这两个，因为当 min > 而不是 max 时，代码仍然有效并且它给出了错误的数字，或者任何如何使它更清洁的建议。非常感谢

标签： javascriptrandomnumbersgenerator

解决方案

谢谢亚伦，我终于让它按我的意愿工作了，现在当我输入比最大值更高的最小值时，它会自动切换它们并给你很好的结果，谢谢:)

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>

推荐阅读