so i build this web page and worth a function of 6 random numbers in a 6 little boxes. evry number get a box. and some time i receive in two boxes the same number and i need this to be not equal. i need different number on all of the boxes. from 1 to 37. big tnx to every one!!! this is the function and all of the css and html design.
function six() {
var s = document.getElementsByClassName("trim");
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
s[i].innerHTML = Math.floor((Math.random() * 37) + 1);
}
}
.lotobox {
width: 550px;
height: 100px;
border: 1px solid black;
background-color: #0080ff;
color: #E52A34;
font-size: 25px;
text-align: center;
margin: auto 0;
padding-bottom: 15px;
}
.numbers {
width: 550px;
height: 530px;
border: 1px solid black;
background-color: darkcyan;
color: black;
text-align: center;
}
th {
border: 4px solid black;
width: 70px;
height: 100px;
padding: 10px 20px 10px;
background-color: gray;
color: black;
text-align: center;
font-family: vardana;
font-size: 40px;
}
td {
text-align: center;
}
#button {
width: 110px;
height: 40px;
margin: 0 auto;
}
.table1 {
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loto Aplication</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="lotobox">
<h1>Loto Box</h1>
</div>
<div class="numbers">
<br><br>
<table class="table1">
<tr>
<th class="trim"></th>
<th class="trim"></th>
<th class="trim"></th>
</tr>
<tr>
<th class="trim"></th>
<th class="trim"></th>
<th class="trim"></th>
</tr>
</table>
<br>
<button id="button" onclick="six()">go!</button>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire