samedi 18 mars 2017

Random number based on upper and lower limit from input

I can not for the life of me, figure out why this will not call the user input properly? The user is meant to give the upper and lower extremes of a range and then when they submit, they are given a random number between those two numbers. I would assume that the problem is when I call the ".value" but I don't know any other way to do it so any help is much appreciated.

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>
   



Aucun commentaire:

Enregistrer un commentaire