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