Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

JavaScript 関数の代入でつまづいたこと

JavaScript 関数の代入でつまづいたこと

最近学校でAjaxとかSevletでWebアプリを作るプロジェクトが始まったので自分でも色々勉強してみる。

【問題】getElemenByIdでnullしか返ってこない

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <script type="text/javascript" src="index.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id textに文字を表示する</title>
  </head>
  <body>
    <p id="text"></p>
  </body>
</html>
index.js
window.onload = start();

function start() {
    var eTex = document.getElementById("text");
    eTex.innerHTML = "Hello";
}

【結論】関数を参照するときは"()"はつけない

お先に結論。
はい。すごい初歩的なことでした。。

index.js
// window.onload = start(); 代入するときにこの時点で実行してしまっている
window.onload = start; //参照するときは()をつけてはいけない(戒め)

function start() {
    var eTex = document.getElementById("text");
    eTex.innerHTML = "Hello";
}

ということでございますね。。

【理由】htmlファイルを解析する前に要素を取得している

Ajaxとかやり始めた初心者がつまづくテンプレみたいなことですよ。
解析し終わる前に要素取ってこれないことは知ってたんですよ?えぇ。
自分の場合は、それよりJavaScriptの基礎の基礎が分かってなかったってことなんですよね。。。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <script type="text/javascript" src="index.js"></script> <!-- jsはここで読み込まれる -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id textに文字を表示する</title>
  </head>
  <body>
    <p id="text"></p>
  </body>
</html>

再掲でございますが。。
まずHTMLと別ファイルのJavaScriptを読み込むタイミングってのは、当たり前ですがscriptタグを描いたところで読み込まれるわけですね。
上のソースだとheadの中で読み込んでいるので、結構早いタイミングで読み込まれるわけです。
そうするとhtmlをすべて解析し終わる前にjavaScriptの解析が終わり、先に実行されてしまうわけですね。
ここで、まだ解析も終わっていないのに下のbodyの中にあるpタグを取ってこれるわけがありません。
なので、window.onloadで全てhtml解析が終わってから実行しようとしたわけですが。。。

index.js
// window.onload = start(); 代入するときにこの時点で実行してしまっている
window.onload = start; //参照するときは()をつけてはいけない(戒め)

これですよ。
代入する時点で実行しちゃだめでしょ!!
JavaScriptってのは関数も変数に代入してやり取りができるんですね。
そのシステムをよく理解していなかった。。。

関数に()をつけるとその関数を実行するよ!って意味になるんです。

つまりwindow.onloadが呼び出されるときに代入した変数を実行しなきゃいけないんですが。
その前に代入する時点で実行してしまっていて、HTMLの解釈が追い付いていないのに、関数Start内の

index.js
function start() {
    var eTex = document.getElementById("text");
    eTex.innerHTML = "Hello";
}

getElementByIdが実行されてしまい、クライアント側のjavascriptは"text"なんでidはありまへんで、
と解釈してしまっていたというわけですね。。。はい。。。。。。。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away