More than 1 year has passed since last update.

javaScriptからimgタグの情報を取得しようとしたけど[null]だった話

Last updated at 2022-04-16Posted at 2022-04-15

ことのはじめ

以前にゲームの設計をしてそもそもjavaScriptからhtmlのimgをいじれるのかと疑問におもって実験した｡

以下の文でimgタグをいじろうとした

test.js

let img = document.getElementById("humanCard1");
img.src = "./img/c01.png";

しかし､帰ってきた答えは

null

nullなので､srcプロパティをいじろうとしてもそもそも見つからないからいじれない

test.jsを読み込むタイミングが早かったのが原因

修正前

<head>
  <script src="test.js"></script>
</head>
<body>
  <img src="" alt="" id="humanCard1">
</body>

プログラムは上から順に読まれるので

imgタグを読み込む前にtest.jsを読み込でしまった｡
なのでtest.jsは一番最後に読み込むことにした

修正前

<head>
</head>
<body>
  <img src="" alt="" id="humanCard1">
  <script src="test.js"></script>
</body>

とても基礎的な部分でエラーを起こしてしまった｡