JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
    <form name="form1">
        <br>
        <span id="user">num:</span>
        <input type="text" value="" name="user" id="user1" class="user">
        <input type="text" value="" name="user" id="user2" class="user">
        <input type="text" value="" name="user" id="user3" class="user">
        <input type="text" value="" name="user" id="user4" class="user">
        <input type="text" value="" name="user" id="user5" class="user">
        <input type="text" value="" name="user" id="user6" class="user">
        <br>
        <input type="button" value="クリック！" name="win" id="win"><br>
        <span id="cpu">cpu:</span>
        <input type="text" value="" name="com" id="cpu1" readonly class="cpu">
        <input type="text" value="" name="com" id="cpu2" readonly class="cpu">
        <input type="text" value="" name="com" id="cpu3" readonly class="cpu">
        <input type="text" value="" name="com" id="cpu4" readonly class="cpu">
        <input type="text" value="" name="com" id="cpu5" readonly class="cpu">
        <input type="text" value="" name="com" id="cpu6" readonly class="cpu">
        <br>
        <span id="bonus">ラッキーナンバー</span>
        <input type="text" value="" name="com" id="cpu7" readonly class="cpu">
        <br>
        <br>
        <span id="res">当選結果</span>
    </form>
    <hr />
    <div>
        <ul>
            <li>cpu1からcpu6までと、ユーザー入力とで共通しているナンバー: <span id="json-matchedNumbers"/>
        </ul>
    </div>

CSS

input { width: 80px; font-size: 18pt;  }

.cpu { background-color: silver; }
#cpu7 { background-color: gold; }

JavaScript

document.getElementById('win').addEventListener('click', check7);

function check7() {

  // 生成するナンバーの最大値
  const MAX_NUMBER = 43;

  // 1からMAX_NUMBER までを含む配列を生成
  const nums = [...Array(MAX_NUMBER)].map((_,i) => i+1);

  // cpu を表示する input を取得
  const cpuInputs = document.getElementsByClassName('cpu');

  // nums をランダムにシャッフルして先頭のcpu個数分の配列を作成
  const cpu =  _.shuffle(nums).slice(0, cpuInputs.length);

  // cpu を画面に表示
  for (let i = 0; i < cpuInputs.length; i ++) {
    cpuInputs[i].value = cpu[i];
  }

  // ユーザーから入力されたナンバーの配列を作成
  const users = document.getElementsByClassName('user');
  const userInputNumbers = Array.prototype.map.call(users, (user) => Number(user.value)).filter(x => x);

  // cpu1からcpu6までと、userInputNumbers とで共通しているナンバーの配列を取得
  const matchedNumbers = _.intersection(cpu.slice(0, userInputNumbers.length), userInputNumbers);

  // 結果を判定して表示
  const res = document.getElementById('res');
  const luckyNumber = parseInt(document.getElementById('cpu7').value);

  switch(matchedNumbers.length) {
    case 6: // 6個一致
      res.innerHTML="当選結果:1等";
      break;
    case 5: // 5個一致
      res.innerHTML=`当選結果:${userInputNumbers.includes(luckyNumber) ? 2 : 3 }等`;
      break;
    case 4: // 4個一致
      res.innerHTML="当選結果:4等";
      break;
    case 3:  // 3個一致
      res.innerHTML="当選結果:5等";
      break;
    default: // それ以外
      res.innerHTML="当選結果:ハズレ";
      break;
  }

  // 確認用の表示
  document.getElementById('json-matchedNumbers').innerText = JSON.stringify(matchedNumbers);
};