Lotte Web Game using Javascript

Question

I'm just started writing Javascript. So i hope everyone can help me. Now I'm writing a Lotte web game.

the first step: Choose the number of participants
the second step: Choose the number

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>

What is your question?

Kinglish
– Kinglish

2021-06-03 04:02:19 +00:00
Commented Jun 3, 2021 at 4:02 — Kinglish
– Kinglish, Commented Jun 3, 2021 at 4:02
my code is not working.Please help me.

Hiep Anh
– Hiep Anh

2021-06-03 04:54:51 +00:00
Commented Jun 3, 2021 at 4:54 — Hiep Anh
– Hiep Anh, Commented Jun 3, 2021 at 4:54

vanowm · Accepted Answer · 2021-06-03 05:26:58Z

1

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));

answered Jun 3, 2021 at 5:26

vanowm

10.4k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hiep Anh Over a year ago

how to do Math.random() equals the number selected in the number selection section Thank

vanowm Over a year ago

use members.length instead of lotArr.length

Collectives™ on Stack Overflow

Lotte Web Game using Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related