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




  
  
    
    
      Let's choose the participating members!：

      
      
        Number of lottery：
        
        Winner：
        
        
        
        Number：
        

        
      
      
      
        
      
      
      
        Winner：
      
      
    

    
    
      
        Sales department
        business
        General affairs
        Production department
        PART
      
      
      
        A
        B
        C
        D
        E
        F
      
      
      
        G
        H
        I
        K
        L
        M
      
      
      
        N
        O
        P
        Q
        X
        
      
      
      
        Y
        Z
        V
        R
        T
        
      
      
      
        Y
        W
        P
        AA
        AB
        
      
      
      
        AC
        AD
        AE
        AF
        AG
        
      
      
      
        AH
        AJ
        AK
        
        
        
      
      
      
        AL

Lotte Web Game using Javascript

Answers (1)

Related Questions