【 javascript 】三つのカードからあたりを引き当てるゲーム

課題とテストと急遽始まった引っ越し作業でが山積みになり、
いい感じで集中力発揮できています。嬉しい笑

そろそろjavascriptやんなきゃ、と言うことで教科書に乗っている簡単なゲームを作りました。
イベントハンドラの復習になるので、おためしあれ。

HTML

<div class="deck">
  <table>
    <tr>
      <td class="card" id="card0"></td>
      <td class="card" id="card1"></td>
      <td class="card" id="card2"></td>
    </tr>
  </table>
  <button id="Shuffle">Shuffle</button>
</div>

CSS

.card{
  width: 50px;
  height: 70px;
  border: 1px solid blue;
  border-radius: 10px;
  text-align: center;
  font-size: 26px;
  background-color: white;
  box-shadow: rgb(128, 128, 128) 5px 5px;
}

JS

let strike = Math.floor(Math.random() * 3);

window.onload = function(){
  document.getElementById("card0").onclick = myhandler0;
  document.getElementById("card1").onclick = myhandler1;
  document.getElementById("card2").onclick = myhandler2;
  document.getElementById("Shuffle").onclick = shuffle;
}

function myhandler0(e){
  if(strike == 0){
    document.getElementById("card0").textContent = "○";
  }
}
function myhandler1(e){
  if(strike == 1){
    document.getElementById("card1").textContent = "○";
  }
}
function myhandler2(e){
  if(strike == 2){
    document.getElementById("card2").textContent = "○";
  }
}
function shuffle(e){
  strike = Math.floor(Math.random() * 3)
  document.getElementById("card0").textContent = "";
  document.getElementById("card1").textContent = "";
  document.getElementById("card2").textContent = "";
}

解説

document.getElementById("card0").onclick = myhandler0;
カードをクリックすると関数処理が実行されます。
onclickプロパティーに関数オブジェクトを持った変数を当てます。
「イベントハンドラを登録します」 これが適切な表現らしいです。

function myhandler0(e){
  if(strike == 0){
    document.getElementById("card0").textContent = "○";
  }
}

(shuffleボタンを押すと0~2のどれかがstrike変数に格納されます。)
その数字とクリックしたカードが合えば"○"を返します。

といったゲームです。

エラー

Uncaught TypeError: Cannot set property 'onclick' of null  at pen.js:3  // nullにプロパティーおけねーよ

一個一個コンソールで吐き出してみると、 ocument.getElementById("Shuffle")のid名を間違って小文字で書いていた模様
タイポは勿体無いです。笑

code.pen埋め込めるんだ、、、すごいですね笑
次からコードは省いて、解説と詰まったところだけで良さそうですね！！
おしまい