ツタンラーメンの忘備録

プログラミングや精神疾患、ラーメンについて書いていきます。たぶん。

btn.addEventListenerが使えなかった(nullが返ってきた)

初心者にありがち？なミスなんだけど、

//a.js
const btn = document.getElementById('btn');
btn.addEventListener( 'click' , function() {
    socket.emit('btn', true);
} );

//もしくは

document.querySelector('#btn').onclick = function () {
  socket.emit('btn', true);
}

とするとnullが返ってくる。

htmlはざっくり

<script type="text/javascript" src="a.js"></script>
<body>
    <input type="button" id="btn" value="ループ開始" class="select" />
</body>

こんなん

理由は下記がわかりやすい

teratail.com
簡単に言うと呼び出しが早すぎて順番が逆転する状態らしい。

私流に描くと

window.onload = function(){
  const btn = document.getElementById('btn');
  btn.addEventListener( 'click' , function() {
      socket.emit('btn', true);
  } );
};

やらかしてしまった…。こんなんに時間を取られたのか…。

ちなみに

<script type="text/javascript" src="a.js"></script>

を

<script type="text/javascript" scr="a.js"></script>

と描くミスをたまにやる。初心者はやることが違いますね(笑)
scr