document.getElementById(...) is nullとエラーが出てくる

Question

実現したいこと

エラーを出ないようにして欲しい。
blueを背景にHello Blue!と表示できるようにしたい

エラーの内容

document.getElementById(...) is nullとエラーが出てきます。

該当のソースコード

var region = document.createElement("div");
region.id = "r1";
region.textContent = "Hello Blue!";
document.getElementById("r1").style.backgroundColor = "blue";
document.body.appendChild(region);

Answer 1

やり方は２つ

(1)appendしてからr1をさがす、つまり

document.getElementById("r1").style.backgroundColor = "blue";
document.body.appendChild(region);
↓↓↓
document.body.appendChild(region);
document.getElementById("r1").style.backgroundColor = "blue";

と、順番を変えるだけ。ただわざわざr1を探す必要もないので
(2)最初から設定したDOMを挿入する
のも有効です

window.addEventListener('DOMContentLoaded', ()=>{
  const region = Object.assign(document.createElement("div"),{
  id:"r1",
  textContent:"Hello Blue!",
  style:"background-Color:blue",
  });
  document.body.appendChild(region);
});

Comments

[noveemotto]

ありがとうございます！

Answer 2

documentからgetElementById()で探すようなコードになっており、
getElementById()を書いた段階ではdocument内にr1としたIDを持つ要素がないため起きています。
そもそもregionという変数はcreateElement()で生成されているオブジェクトを保持していることからelementですし、idやtextと同様にstyleも適用してからappendChild()すれば良いのではないでしょうか。

Comments

[noveemotto]

ありがとうございます！確かに、styleの方を適用してからやれば良かったですね！ありがとうございます