javascript - 基于输入上下限的随机数

Question

我这辈子都弄不明白为什么这不会正确调用用户输入？用户应该给出一个范围的上限和下限，然后当他们提交时，他们会得到一个介于这两个数字之间的随机数。我认为问题出在我调用“.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>
   

Answer 1

您需要使用最大值和最小值的差值作为随机数的因子，然后添加最小值。

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>