Reputation: 21
I'm just started writing Javascript. So i hope everyone can help me. Now I'm writing a Lotte web game.
My goal is:
Select the number of participants in the table below and then in the [select option box] select the number corresponding to the number of particaipants .For example 5 participants choose number 5. After pressing the submit button, random players will be displayed in combination with the name and the number.
Example :David-1,Jane-5,July-3,Michale-2,John-4
'use strict';
function start() {
const members = document.querySelectorAll('input[type="checkbox"]:checked');
const hitNum = +document.querySelector('select[name="hit"]').value;
const missNum = +document.querySelector('select[name="miss"]').value;
if (members.length > hitNum + missNum) {
alert("くじの本数が足りないよ");
return;
}
const lotArr = ('1'.repeat(hitNum) + '0'.repeat(missNum)).split('');
const result = [
[],
[]
];
for (const e of members) {
const rnd = Math.floor(Math.random() * lotArr.length);
const pickup = lotArr.splice(rnd, 1)[0];
result[pickup].push(e.value);
}
document.querySelector('#result h3:first-child').textContent = 'Win a prize Persion:' + result[1].join();
}
.wrapper {
margin: 50px 10%;
text-align: left;
}
body {
background: #6B92B9;
}
.area {
width: 80%;
margin: 0 auto;
}
table {
width: 100%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
}
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
background-color: #6c79e0;
color: white;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
margin-left: 250px;
}
#member {
margin: 5px auto 20px;
}
#member label {
display: inline-block;
}
#honsuu {
margin: 0 auto 20px;
}
.button {
border-bottom: solid 1px #000;
padding: 0 0 20px;
margin: 0 auto 50px
}
#result h3 {
font-size: 18px;
font-weight: bold;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="area">
<div id="member">
<h2>Let's choose the participating members!:</h2>
<div id="honsuu">
<h2>Number of lottery:</h2>
Winner:
<select name="hit">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
</select>
<!---->
Number:
<select name="miss">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
</select><br>
</div>
<div class="button" style="text-align: center;">
<input type="button" value="Lottery start" onclick="start();">
</div>
<div id="result">
<h3>Winner:</h3>
</div>
</div>
<table id="t01">
<tr>
<th>Sales department</th>
<th>business</th>
<th>General affairs</th>
<th colspan="2" style="text-align: center;">Production department</th>
<th>PART</th>
</tr>
<tr>
<td><label><input type="checkbox" value="A" checked/>A</label></td>
<td><label><input type="checkbox" value="B" checked/>B</label></td>
<td><label><input type="checkbox" value="C" checked/>C</label></td>
<td><label><input type="checkbox" value="D" checked/>D</label></td>
<td><label><input type="checkbox" value="E" checked/>E</label></td>
<td><label><input type="checkbox" value="F" checked/>F</label></td>
</tr>
<tr>
<td><label><input type="checkbox" value="G" checked/>G</label></td>
<td><label><input type="checkbox" value="H" checked/>H</label></td>
<td><label><input type="checkbox" value="I" checked/>I</label></td>
<td><label><input type="checkbox" value="K" checked/>K</label></td>
<td><label><input type="checkbox" value="L" checked/>L</label></td>
<td><label><input type="checkbox" value="M" checked/>M</label></td>
</tr>
<tr>
<td><label><input type="checkbox" value="N" checked/>N</label></td>
<td><label><input type="checkbox" value="O" checked/>O</label></td>
<td><label><input type="checkbox" value="P" checked/>P</label></td>
<td><label><input type="checkbox" value="Q" checked/>Q</label></td>
<td><label><input type="checkbox" value="X" checked/>X</label></td>
<td></td>
</tr>
<tr>
<td><label><input type="checkbox" value="Y" checked/>Y</label></td>
<td><label><input type="checkbox" value="Z" checked/>Z</label></td>
<td><label><input type="checkbox" value="V" checked/>V</label></td>
<td><label><input type="checkbox" value="R" checked/>R</label></td>
<td><label><input type="checkbox" value="T" checked/>T</label></td>
<td></td>
</tr>
<tr>
<td><label><input type="checkbox" value="Y" checked/>Y</label></td>
<td><label><input type="checkbox" value="W" checked/>W</label></td>
<td><label><input type="checkbox" value="P" checked/>P</label></td>
<td><label><input type="checkbox" value="AA" checked/>AA</label></td>
<td><label><input type="checkbox" value="AB" checked/>AB</label></td>
<td></td>
</tr>
<tr>
<td><label><input type="checkbox" value="AC" checked/>AC</label></td>
<td><label><input type="checkbox" value="AD" checked/>AD</label></td>
<td><label><input type="checkbox" value="AE" checked/>AE</label></td>
<td><label><input type="checkbox" value="AF" checked/>AF</label></td>
<td><label><input type="checkbox" value="AG" checked/>AG</label></td>
<td></td>
</tr>
<tr>
<td><label><input type="checkbox" value="AH" checked/>AH</label></td>
<td><label><input type="checkbox" value="AJ" checked/>AJ</label></td>
<td><label><input type="checkbox" value="AK" checked/>AK</label></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label><input type="checkbox" value="AL" checked/>AL</label></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
Upvotes: 0
Views: 131
Reputation: 10221
Your question is to vague, so if you want add random numbers to the results, you can use something like this:
result[pickup].push(e.value + Math.floor(Math.random() * lotArr.length));
Upvotes: 1