ビンゴゲームの制作

### ビンゴゲームの制作
STARTボタンをクリックするとビンゴ用のカードを作り、その後に抽選ボタンをクリックするごとに抽選して、該当番号を埋めてくれるプログラムを制作します。

```html
<body>
  <table id="table"></table><br>
  <button onclick="start()">START</button>
  <button onclick="lot()">抽選</button>
  <span id="result"></span><br>
  <span id="result2"></span>
</body>
```

まず、body要素内にtable要素とbutton要素を2つ、span要素を2つ作ります。
table要素にはビンゴ用のカードの表示、button要素はクリックするとカードを作成してくれるボタンと、クリックすると抽選してくれるボタンです。span要素は抽選の結果の表示と、ビンゴしたときの表示をします。

```javascript
    let numbers = [];
    let first;

    function start() {
      numbers = numSet();
      first = true;
      let result = document.getElementById("result");
      result.textContent = "";

      let table = document.getElementById("table");
      table.innerHTML = "";
      for(let r = 0; r < 5; r++) {
        let tr = document.createElement("tr");
        for(let c = 0; c < 5; c++) {
          let td = document.createElement("td");
          let s = Math.floor(Math.random()*numbers.length);
          td.value = numbers[s];
          td.textContent = td.value;
          td.id = "num" + td.value;
          td.className = "judge";
          td.index = r * 5 + c;
          td.j1 = false;
          td.j2 = false;
          td.j3 = false;
          numbers.splice(s, 1);
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
    }
```

script要素内は、まず変数numbersとfirstを定義します。
numbersは1〜99までの数字を代入する配列です。
firstは関数startの処理の際に配列numbersの1〜99の数字の内ビンゴ用のカードで使用した数字が25個分無くなっているので、関数lot内で再度1〜99までの数字を代入するために使用します。

関数startはビンゴ用のカードを作成する関数です。
最初に変数numbersに関数numSetを代入します。numSetは1〜99までの数字を返してくれる関数です。
変数firstにはtrueを代入します。後で関数lotを発火させたときに値をfalseにすることで、2回目以降に配列numbersに関数numSetが代入されないようにします。（抽選された数が重複しないようにするため）

変数resultの定義と空の値を代入することで、新しいカードを作成した際に結果の文字表示を消去しています。

次にbody要素内のtable要素に二次元配列でビンゴカードの表示をさせます。「table.innerHTML = "";」で2回目以降にSTARTボタンをクリックしたときに前のカードを削除しています。
「let s = Math.floor(Math.random( )*numbers.length);」で配列numbersからランダムに要素を一つ取得しています。「td.value = numbers[s];」で取得した要素の数字をtd要素のvalueプロパティに代入しています。
td要素のj1プロバティは後で横の行が揃ったときに値をtrueに変えます。j2は縦の列、j3は斜めが揃ったときにtrueに変えます。
「numbers.splice(s, 1);」でビンゴ用のカードに使われた数字を削除しています。
配列.splice(x, y)で配列の要素x番目からy個の要素を削除することができます。（xは0から数える）

```javascript
    function lot() {
      if(first){
        numbers = numSet();
        first = false;
      }
      let s = Math.floor(Math.random()*numbers.length);
      let result = document.getElementById("result");
      result.textContent = `結果：${numbers[s]}`;
      let w = "num" + numbers[s];
      let td = document.getElementById(w);
      if(td) {
        td.textContent = "●";
      }
      let td2 = document.getElementsByClassName("judge");
      let result2 = document.getElementById("result2");
      result2.textContent = "";
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j1 == false) && (td2.item(1).index == 1 && td2.item(1).textContent == "●" && td2.item(1).j1 == false) && (td2.item(2).index == 2 && td2.item(2).textContent == "●" && td2.item(2).j1 == false) && (td2.item(3).index == 3 && td2.item(3).textContent == "●" && td2.item(3).j1 == false) && (td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j1 == false)) {
        word();
        td2.item(0).j1 =true;
        td2.item(1).j1 =true;
        td2.item(2).j1 =true;
        td2.item(3).j1 =true;
        td2.item(4).j1 =true;
      } else if ((td2.item(5).index == 5 && td2.item(5).textContent == "●" && td2.item(5).j1 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j1 == false) && (td2.item(7).index == 7 && td2.item(7).textContent == "●" && td2.item(7).j1 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j1 == false) && (td2.item(9).index == 9 && td2.item(9).textContent == "●" && td2.item(9).j1 == false)) {
        word();
        td2.item(5).j1 =true;
        td2.item(6).j1 =true;
        td2.item(7).j1 =true;
        td2.item(8).j1 =true;
        td2.item(9).j1 =true;
      } else if ((td2.item(10).index == 10 && td2.item(10).textContent == "●" && td2.item(10).j1 == false) && (td2.item(11).index == 11 && td2.item(11).textContent == "●" && td2.item(11).j1 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j1 == false) && (td2.item(13).index == 13 && td2.item(13).textContent == "●" && td2.item(13).j1 == false) && (td2.item(14).index == 14 && td2.item(14).textContent == "●" && td2.item(14).j1 == false)) {
        word();
        td2.item(10).j1 =true;
        td2.item(11).j1 =true;
        td2.item(12).j1 =true;
        td2.item(13).j1 =true;
        td2.item(14).j1 =true;
      } else if ((td2.item(15).index == 15 && td2.item(15).textContent == "●" && td2.item(15).j1 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j1 == false) && (td2.item(17).index == 17 && td2.item(17).textContent == "●" && td2.item(17).j1 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j1 == false) && (td2.item(19).index == 19 && td2.item(19).textContent == "●" && td2.item(19).j1 == false)) {
        word();
        td2.item(15).j1 =true;
        td2.item(16).j1 =true;
        td2.item(17).j1 =true;
        td2.item(18).j1 =true;
        td2.item(19).j1 =true;
      } else if ((td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j1 == false) && (td2.item(21).index == 21 && td2.item(21).textContent == "●" && td2.item(21).j1 == false) && (td2.item(22).index == 22 && td2.item(22).textContent == "●" && td2.item(22).j1 == false) && (td2.item(23).index == 23 && td2.item(23).textContent == "●" && td2.item(23).j1 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j1 == false)) {
        word();
        td2.item(20).j1 =true;
        td2.item(21).j1 =true;
        td2.item(22).j1 =true;
        td2.item(23).j1 =true;
        td2.item(24).j1 =true;
      }
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j2 == false) && (td2.item(5).index == 5 && td2.item(5).textContent == "●" && td2.item(5).j2 == false) && (td2.item(10).index == 10 && td2.item(10).textContent == "●" && td2.item(10).j2 == false) && (td2.item(15).index == 15 && td2.item(15).textContent == "●" && td2.item(15).j2 == false) && (td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j2 == false)) {
        word();
        td2.item(0).j2 =true;
        td2.item(5).j2 =true;
        td2.item(10).j2 =true;
        td2.item(15).j2 =true;
        td2.item(20).j2 =true;
      } else if ((td2.item(1).index == 1 && td2.item(1).textContent == "●" && td2.item(1).j2 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j2 == false) && (td2.item(11).index == 11 && td2.item(11).textContent == "●" && td2.item(11).j2 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j2 == false) && (td2.item(21).index == 21 && td2.item(21).textContent == "●" && td2.item(21).j2 == false)) {
        word();
        td2.item(1).j2 =true;
        td2.item(6).j2 =true;
        td2.item(11).j2 =true;
        td2.item(16).j2 =true;
        td2.item(21).j2 =true;
      } else if ((td2.item(2).index == 2 && td2.item(2).textContent == "●" && td2.item(2).j2 == false) && (td2.item(7).index == 7 && td2.item(7).textContent == "●" && td2.item(7).j2 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j2 == false) && (td2.item(17).index == 17 && td2.item(17).textContent == "●" && td2.item(17).j2 == false) && (td2.item(22).index == 22 && td2.item(22).textContent == "●" && td2.item(22).j2 == false)) {
        word();
        td2.item(2).j2 =true;
        td2.item(7).j2 =true;
        td2.item(12).j2 =true;
        td2.item(17).j2 =true;
        td2.item(22).j2 =true;
      } else if ((td2.item(3).index == 3 && td2.item(3).textContent == "●" && td2.item(3).j2 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j2 == false) && (td2.item(13).index == 13 && td2.item(13).textContent == "●" && td2.item(13).j2 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j2 == false) && (td2.item(23).index == 23 && td2.item(23).textContent == "●" && td2.item(23).j2 == false)) {
        word();
        td2.item(3).j2 =true;
        td2.item(8).j2 =true;
        td2.item(13).j2 =true;
        td2.item(18).j2 =true;
        td2.item(23).j2 =true;
      } else if ((td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j2 == false) && (td2.item(9).index == 9 && td2.item(9).textContent == "●" && td2.item(9).j2 == false) && (td2.item(14).index == 14 && td2.item(14).textContent == "●" && td2.item(14).j2 == false) && (td2.item(19).index == 19 && td2.item(19).textContent == "●" && td2.item(19).j2 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j2 == false)) {
        word();
        td2.item(4).j2 =true;
        td2.item(9).j2 =true;
        td2.item(14).j2 =true;
        td2.item(19).j2 =true;
        td2.item(24).j2 =true;
      }
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j3 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j3 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j3 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j3 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j3 == false)) {
        word();
        td2.item(0).j3 =true;
        td2.item(6).j3 =true;
        td2.item(12).j3 =true;
        td2.item(18).j3 =true;
        td2.item(24).j3 =true;
      } else if ((td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j3 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j3 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j3 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j3 == false) && (td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j3 == false)) {
        word();
        td2.item(4).j3 =true;
        td2.item(8).j3 =true;
        td2.item(12).j3 =true;
        td2.item(16).j3 =true;
        td2.item(20).j3 =true;
      }
      numbers.splice(s, 1);
      if(!numbers.length) {
        result.textContent = "抽選は終わりました。";
      }
    }
```

関数lotはビンゴの抽選をする関数です。
最初のif文では配列numbersに1〜99の数字を代入していますが、抽選を開始した1回目だけ行うようにしています。2回目以降はfalseとなるので抽選された数字が出ることはありません。

次にランダムに数字を出して、後で「let w = "num" + numbers[s];」と「let td = document.getElementById(w);」でtdに代入した値が、if文でビンゴカードに存在する数字のidと同じ場合はカードの数字を埋めます。

変数td2でビンゴカード上の全てのマスのデータを取得します。

「let result2 = document.getElementById(result2);」と「result2.textContent = "";」でビンゴした後に再抽選したときにビンゴの表示を消去しています。

次のif文でビンゴの判定をしています。
横の行、縦の列、斜めのそれぞれでインデックス番号が揃っているかと画面の表示が埋まっているか判定しています。該当する場合はword関数でビンゴの表示を行い、2回目以降にビンゴの表示をしないようにj1,j2,j3の値にtrueを代入します。
判定が終わったら、「numbers.splice(s, 1);」で抽選された要素を削除します。

最後のif文では、全ての抽選が出尽くした際に抽選が終わった表示をするようにします。

```javascript
    function numSet() {
      let i = [];
      for(let n = 1; n < 100; n++) {
        i.push(n);
      }
      return i;
    }
```

numSet関数では配列に1〜99の数字を代入して返すようにしています。

```javascript
    function word() {
      let result2 = document.getElementById("result2");
      result2.textContent = "ビンゴです。おめでとうございます。";
    }
```

word関数ではビンゴしたときに画面にビンゴの表示を出すようにしています。

下記のコードをコピーしてファイルに貼り付ければ試すことができます。

```html
<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>bingo</title>

  <style>
    table {
      border: 3px double black;
      border-collapse: collapse;
    }
    td {
      width: 50px;
      height: 50px;
      border: 1px solid black;
      font-size: 30px;
      text-align: center;
    }
    button {
      width: 60px;
      height: 30px;
      margin: 0px 10px 0 0;
    }
    span {
      font-size: 20px;
      margin: 0;
    }
  </style>

  <script>
    let numbers = [];
    let first;

    function start() {
      numbers = numSet();
      first = true;
      let result = document.getElementById("result");
      result.textContent = "";

      let table = document.getElementById("table");
      table.innerHTML = "";
      for(let r = 0; r < 5; r++) {
        let tr = document.createElement("tr");
        for(let c = 0; c < 5; c++) {
          let td = document.createElement("td");
          let s = Math.floor(Math.random()*numbers.length);
          td.value = numbers[s];
          td.textContent = td.value;
          td.id = "num" + td.value;
          td.className = "judge";
          td.index = r * 5 + c;
          td.j1 = false;
          td.j2 = false;
          td.j3 = false;
          numbers.splice(s, 1);
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
    }

    function lot() {
      if(first){
        numbers = numSet();
        first = false;
      }
      let s = Math.floor(Math.random()*numbers.length);
      let result = document.getElementById("result");
      result.textContent = `結果：${numbers[s]}`;
      let w = "num" + numbers[s];
      let td = document.getElementById(w);
      if(td) {
        td.textContent = "●";
      }
      let td2 = document.getElementsByClassName("judge");
      let result2 = document.getElementById("result2");
      result2.textContent = "";
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j1 == false) && (td2.item(1).index == 1 && td2.item(1).textContent == "●" && td2.item(1).j1 == false) && (td2.item(2).index == 2 && td2.item(2).textContent == "●" && td2.item(2).j1 == false) && (td2.item(3).index == 3 && td2.item(3).textContent == "●" && td2.item(3).j1 == false) && (td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j1 == false)) {
        word();
        td2.item(0).j1 =true;
        td2.item(1).j1 =true;
        td2.item(2).j1 =true;
        td2.item(3).j1 =true;
        td2.item(4).j1 =true;
      } else if ((td2.item(5).index == 5 && td2.item(5).textContent == "●" && td2.item(5).j1 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j1 == false) && (td2.item(7).index == 7 && td2.item(7).textContent == "●" && td2.item(7).j1 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j1 == false) && (td2.item(9).index == 9 && td2.item(9).textContent == "●" && td2.item(9).j1 == false)) {
        word();
        td2.item(5).j1 =true;
        td2.item(6).j1 =true;
        td2.item(7).j1 =true;
        td2.item(8).j1 =true;
        td2.item(9).j1 =true;
      } else if ((td2.item(10).index == 10 && td2.item(10).textContent == "●" && td2.item(10).j1 == false) && (td2.item(11).index == 11 && td2.item(11).textContent == "●" && td2.item(11).j1 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j1 == false) && (td2.item(13).index == 13 && td2.item(13).textContent == "●" && td2.item(13).j1 == false) && (td2.item(14).index == 14 && td2.item(14).textContent == "●" && td2.item(14).j1 == false)) {
        word();
        td2.item(10).j1 =true;
        td2.item(11).j1 =true;
        td2.item(12).j1 =true;
        td2.item(13).j1 =true;
        td2.item(14).j1 =true;
      } else if ((td2.item(15).index == 15 && td2.item(15).textContent == "●" && td2.item(15).j1 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j1 == false) && (td2.item(17).index == 17 && td2.item(17).textContent == "●" && td2.item(17).j1 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j1 == false) && (td2.item(19).index == 19 && td2.item(19).textContent == "●" && td2.item(19).j1 == false)) {
        word();
        td2.item(15).j1 =true;
        td2.item(16).j1 =true;
        td2.item(17).j1 =true;
        td2.item(18).j1 =true;
        td2.item(19).j1 =true;
      } else if ((td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j1 == false) && (td2.item(21).index == 21 && td2.item(21).textContent == "●" && td2.item(21).j1 == false) && (td2.item(22).index == 22 && td2.item(22).textContent == "●" && td2.item(22).j1 == false) && (td2.item(23).index == 23 && td2.item(23).textContent == "●" && td2.item(23).j1 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j1 == false)) {
        word();
        td2.item(20).j1 =true;
        td2.item(21).j1 =true;
        td2.item(22).j1 =true;
        td2.item(23).j1 =true;
        td2.item(24).j1 =true;
      }
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j2 == false) && (td2.item(5).index == 5 && td2.item(5).textContent == "●" && td2.item(5).j2 == false) && (td2.item(10).index == 10 && td2.item(10).textContent == "●" && td2.item(10).j2 == false) && (td2.item(15).index == 15 && td2.item(15).textContent == "●" && td2.item(15).j2 == false) && (td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j2 == false)) {
        word();
        td2.item(0).j2 =true;
        td2.item(5).j2 =true;
        td2.item(10).j2 =true;
        td2.item(15).j2 =true;
        td2.item(20).j2 =true;
      } else if ((td2.item(1).index == 1 && td2.item(1).textContent == "●" && td2.item(1).j2 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j2 == false) && (td2.item(11).index == 11 && td2.item(11).textContent == "●" && td2.item(11).j2 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j2 == false) && (td2.item(21).index == 21 && td2.item(21).textContent == "●" && td2.item(21).j2 == false)) {
        word();
        td2.item(1).j2 =true;
        td2.item(6).j2 =true;
        td2.item(11).j2 =true;
        td2.item(16).j2 =true;
        td2.item(21).j2 =true;
      } else if ((td2.item(2).index == 2 && td2.item(2).textContent == "●" && td2.item(2).j2 == false) && (td2.item(7).index == 7 && td2.item(7).textContent == "●" && td2.item(7).j2 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j2 == false) && (td2.item(17).index == 17 && td2.item(17).textContent == "●" && td2.item(17).j2 == false) && (td2.item(22).index == 22 && td2.item(22).textContent == "●" && td2.item(22).j2 == false)) {
        word();
        td2.item(2).j2 =true;
        td2.item(7).j2 =true;
        td2.item(12).j2 =true;
        td2.item(17).j2 =true;
        td2.item(22).j2 =true;
      } else if ((td2.item(3).index == 3 && td2.item(3).textContent == "●" && td2.item(3).j2 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j2 == false) && (td2.item(13).index == 13 && td2.item(13).textContent == "●" && td2.item(13).j2 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j2 == false) && (td2.item(23).index == 23 && td2.item(23).textContent == "●" && td2.item(23).j2 == false)) {
        word();
        td2.item(3).j2 =true;
        td2.item(8).j2 =true;
        td2.item(13).j2 =true;
        td2.item(18).j2 =true;
        td2.item(23).j2 =true;
      } else if ((td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j2 == false) && (td2.item(9).index == 9 && td2.item(9).textContent == "●" && td2.item(9).j2 == false) && (td2.item(14).index == 14 && td2.item(14).textContent == "●" && td2.item(14).j2 == false) && (td2.item(19).index == 19 && td2.item(19).textContent == "●" && td2.item(19).j2 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j2 == false)) {
        word();
        td2.item(4).j2 =true;
        td2.item(9).j2 =true;
        td2.item(14).j2 =true;
        td2.item(19).j2 =true;
        td2.item(24).j2 =true;
      }
      if((td2.item(0).index == 0 && td2.item(0).textContent == "●" && td2.item(0).j3 == false) && (td2.item(6).index == 6 && td2.item(6).textContent == "●" && td2.item(6).j3 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j3 == false) && (td2.item(18).index == 18 && td2.item(18).textContent == "●" && td2.item(18).j3 == false) && (td2.item(24).index == 24 && td2.item(24).textContent == "●" && td2.item(24).j3 == false)) {
        word();
        td2.item(0).j3 =true;
        td2.item(6).j3 =true;
        td2.item(12).j3 =true;
        td2.item(18).j3 =true;
        td2.item(24).j3 =true;
      } else if ((td2.item(4).index == 4 && td2.item(4).textContent == "●" && td2.item(4).j3 == false) && (td2.item(8).index == 8 && td2.item(8).textContent == "●" && td2.item(8).j3 == false) && (td2.item(12).index == 12 && td2.item(12).textContent == "●" && td2.item(12).j3 == false) && (td2.item(16).index == 16 && td2.item(16).textContent == "●" && td2.item(16).j3 == false) && (td2.item(20).index == 20 && td2.item(20).textContent == "●" && td2.item(20).j3 == false)) {
        word();
        td2.item(4).j3 =true;
        td2.item(8).j3 =true;
        td2.item(12).j3 =true;
        td2.item(16).j3 =true;
        td2.item(20).j3 =true;
      }
      numbers.splice(s, 1);
      if(!numbers.length) {
        result.textContent = "抽選は終わりました。";
      }
    }

    function numSet() {
      let i = [];
      for(let n = 1; n < 100; n++) {
        i.push(n);
      }
      return i;
    }

    function word() {
      let result2 = document.getElementById("result2");
      result2.textContent = "ビンゴです。おめでとうございます。";
    }
  </script>
</head>

<body>
  <table id="table"></table><br>
  <button onclick="start()">START</button>
  <button onclick="lot()">抽選</button>
  <span id="result"></span><br>
  <span id="result2"></span>
</body>
</html>
```