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 时，代码仍然有效并给出错误的数字，或任何如何使其更干净的建议。非常感谢
最佳答案
在调用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>或者直接使用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>
关于javascript - 具有交互变量的随机数生成器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59892078/