Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@k_konno

ビンゴゲームの制作

Posted at

ビンゴゲームの制作

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

<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要素は抽選の結果の表示と、ビンゴしたときの表示をします。

    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から数える）

    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文では、全ての抽選が出尽くした際に抽選が終わった表示をするようにします。

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

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

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

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

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

<!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>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?