我这辈子都弄不明白为什么这不会正确调用用户输入？用户应该给出一个范围的上限和下限，然后当他们提交时，他们会得到一个介于这两个数字之间的随机数。我认为问题出在我调用“.value”时，但我不知道任何其他方法可以做到这一点，因此非常感谢您的帮助。
function numberGen(){
var minimum = document.getElementById("minimum").value;
var maximum = document.getElementById("maximum").value;
var number = Math.floor((Math.random() * minimum) + maximum);
document.getElementById("output").innerHTML = number;
}body{background-color: #000000;}
h1{font-family:sans-serif;
color:#ffffff}
p{font-family:sans-serif;
color:#ffffff;}
input[type=number] {
width: 150px;
border: 2px solid #ffffff;
border-radius: 4px;
font-size: 16px;
background-color: #262626;
padding:15px 30px;
color:#ffffff;
}
input[type=number]:hover {
background-color: #515151;
}
button{
border: 2px solid #ffffff;
background-color: #000000;
color:#ffffff;
padding:15px 40px;
font-size:16px;
border-radius:5px
}
button:hover{
background-color: #ffffff;
color:#5a5a5a;
}
.output{
border: 2px solid #ffffff;
background-color: #000000;
border-radius:5px;
padding:15px;
}
.blink_me {
animation: blinker .7s linear infinite;
}
@keyframes blinker {
from { opacity: 1; }
to{opacity:0;}
} <center>
<h1>Random Generator</h1>
<br>
<p>Type your minimum and maximum veriables into the text boxs.</p>
<table cellspacing = 50px width = 100%>
<tr>
<td align = right width = 50%>
<form id="form" onsubmit="return false;">
<input type="number" id="minimum" placeholder="minimum"/>
</form>
</td>
<td align = left width = 50%>
<form id="form" onsubmit="return false;">
<input type="number" id="maximum" placeholder="maximum"/>
</form>
</td>
</tr>
</table>
<button onclick = "numberGen()">Submit</button>
<br>
<br>
<br>
<br>
<br>
<br>
<table class = output width = 50%>
<tr>
<td align = left>
<p id = output><font color = #A9A9A9 >Output<span class = blink_me>:</span></font></p>
</td>
</tr>
</table>
</center>
<script src = gen.js></script>
最佳答案
您需要使用最大值和最小值的差值作为随机数的因子，然后添加最小值。
function numberGen(){
var minimum = +document.getElementById("minimum").value;
// ^ convert number to string
var maximum = +document.getElementById("maximum").value;
// ^ convert number to string
var number = Math.floor((Math.random() * (maximum - minimum + 1)) + minimum);
// ^^^ correction for max val
document.getElementById("output").innerHTML = number;
}
该提议返回包含给定值的随机值。
function numberGen(){
var minimum = +document.getElementById("minimum").value;
var maximum = +document.getElementById("maximum").value;
var number = Math.floor((Math.random() * (maximum - minimum + 1)) + minimum);
document.getElementById("output").innerHTML = number;
}body{background-color: #000000;}
h1{font-family:sans-serif;
color:#ffffff}
p{font-family:sans-serif;
color:#ffffff;}
input[type=number] {
width: 150px;
border: 2px solid #ffffff;
border-radius: 4px;
font-size: 16px;
background-color: #262626;
padding:15px 30px;
color:#ffffff;
}
input[type=number]:hover {
background-color: #515151;
}
button{
border: 2px solid #ffffff;
background-color: #000000;
color:#ffffff;
padding:15px 40px;
font-size:16px;
border-radius:5px
}
button:hover{
background-color: #ffffff;
color:#5a5a5a;
}
.output{
border: 2px solid #ffffff;
background-color: #000000;
border-radius:5px;
padding:15px;
}
.blink_me {
animation: blinker .7s linear infinite;
}
@keyframes blinker {
from { opacity: 1; }
to{opacity:0;}
} <center>
<h1>Random Generator</h1>
<br>
<p>Type your minimum and maximum veriables into the text boxs.</p>
<table cellspacing = 50px width = 100%>
<tr>
<td align = right width = 50%>
<form id="form" onsubmit="return false;">
<input type="number" id="minimum" placeholder="minimum"/>
</form>
</td>
<td align = left width = 50%>
<form id="form" onsubmit="return false;">
<input type="number" id="maximum" placeholder="maximum"/>
</form>
</td>
</tr>
</table>
<button onclick = "numberGen()">Submit</button>
<br>
<table class = output width = 50%>
<tr>
<td align = left>
<p id = output><font color = #A9A9A9 >Output<span class = blink_me>:</span></font></p>
</td>
</tr>
</table>
</center>
<script src = gen.js></script>
关于javascript - 基于输入上下限的随机数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42879633/