基于输入上限和下限的随机数答案

【问题标题】：Random number based on upper and lower limit from input基于输入上限和下限的随机数
【发布时间】：2017-03-18 20:42:50
【问题描述】：

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

【问题讨论】：

抱歉有任何拼写错误！
.value 是 always 字符串，您使用的是字符串，而不是数字，请先解析它们
Math.floor((Math.random() * minimum) + (+maximum));
可能是 Generate random number between two numbers in JavaScript 的副本，但存在处理字符串的附加问题。
@adeneo——这将解决字符串问题，但这是错误的算法。 :-(

标签： javascript html css random numbers

【解决方案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>

【讨论】：