2023/08/04

JavaScriptでは、トップレベルに書いた文は限られたタイミングでしか実行されない

script 要素で .js ファイルを読み込んだとき

import 文の副作用として

code:1.js

let ifstarted = false;

form.addEventListener("click", () => {

// ...

ifstarted = true;

});

if (ifstarted) {

}

このコードは、script 要素で読み込んだときに以下の動作をする

1. ifstarted を定義

2. EventListener を登録

3. ifstarted が true なら ... する

EventListener は、クリックしたタイミングで動作する

つまり、script 要素が読み込まれたずっと後に、ifstarted は true になる

トップレベルで ifstarted を評価しても必ず false になる

解決法

テーブルの子のaddEventListenerは、appendChild時に行う

以下のコードは動くのを確認した

code: 2.js

// ...

const createTd = document.createElement("td");

createTd.addEventListener("click", () => {

console.log(i, j);

});

// ...

table 要素にだけ EventListener を登録しても、クリックされた td 要素を取得することは可能

appendChild関連

document.createElement

要素のオブジェクトを作成する

ノードの追加は行わない

createElementだけではDOMツリーに変化は起こらない

単にオブジェクトを作成するためのもの

appendChild

ノードの追加を行う

DOMツリーに変更を加える

code: 3.js

const a = document.createElement("a");

document.body.appendChild(a);

document.querySelector(".inner").appendChild(a);

こうすると、aはbodyの子に追加されたあと、innerの子へ移動する