質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3320閲覧

jacascript 要素の取得タイミングにつきまして

tempanman

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/01/15 03:16

編集2017/01/15 03:43

###前提・実現したいこと
javascript勉強中の初心者です。
getElementByIdなどDOMに関する部分に関して、
window.onloadを使わないとscriptの実行がhtmlの読み込みより先に行われてしまう為、
要素を取得する場合、window.onloadでHTML読み込み後に実行する、
という事が必要と学びました。
ただ、そのことで混乱してしまったのですが下記の例の場合、
funciton text_overwrite()の実行文の中に、要素取得の記述があり、
ここにはwindow.onloadに代入していません。
なのにエラーにならないのはなぜでしょうか??
自分の理解だと、要素がHTMLで作成される前にscriptでtextIDを指定してしまっているから
エラーになるはずなのでは、、と思ってしまった為。

###発生している問題・エラーメッセージ

<html lang="ja"> <head> <meta charset="UTF-8"> <title>実行タイミング</title> <script> function text_overwrite(){ var text = document.getElementById('text'); text.innerHTML = '書き換え後'; } window.onload = function () { var button = document.getElementById('overwrite'); button.addEventListener('click', text_overwrite, false); } </script> </head> <body> <p id="text">書き換え前</p> <button id="overwrite">書き換え実行</button> </body> </html>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
Javacript

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/01/15 03:17

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答2

0

ボタンを押すとtext_overwrite()関数が実行されると言うことは、ロードが完了した後ということになります。

投稿2017/01/15 03:51

hikochang

総合スコア648

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hikochang

2017/01/15 04:17

JavaScriptの処理が呼び出される時に要素が確定していればエラーになりません。
tempanman

2017/01/15 07:25

ありがとうございます。もう一名ご回答いただいた方にも質問させて頂いているのですが、関数定義の時点ではその要素があるないは関係ないという理解で合ってますでしょうか?? =関数「定義」ではなく「呼び出し」のタイミングで初めて中身がエラーでないかどうかの確認が入る。
tempanman

2017/01/18 03:01

的確かつシンプルなご回答ありがとうございました! 関数の場合は定義の段階ではなく呼び出しの段階で処理される、という理解であれば取得要素より先に書かれているのにエラーにならないということも理解できました! 確認遅れてしまい申し訳ございませんでした、大変助かりましたm(_ _)m
guest

0

ベストアンサー

JavaScript

1function text_overwrite(){ 2 var text = document.getElementById('text'); 3 text.innerHTML = '書き換え後'; 4} 5text_overwrite(); // ← こうしたらエラーになる。 6window.onload = function () { 7 text_overwrite(); // ← ここならエラーにならない(ロード完了を待ってから実行しているから) 8 var button = document.getElementById('overwrite'); 9 button.addEventListener('click', text_overwrite, false); // ← イベント付与自体がロード完了後なので、実行される(ボタンが押される)のは確実にロード完了後になるのでエラーにならない 10}

投稿2017/01/15 05:26

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tempanman

2017/01/15 07:24

事例までいただきありがとうございます。 関数呼び出しの時点でgetElementByIdで取得する要素が作成されていない場合はエラーになるが、 関数定義の時点で存在していなくてもエラーにならないのは、 定義の時点ではまだ実行していない為、そもそも関数内のgetElementByIdの取得要素があるかどうかのチェックもされないから、という理解で合ってますでしょうか??
kei344

2017/01/15 07:50

合ってます。
tempanman

2017/01/18 03:00

確認が遅れてしまい申し訳ございません。親切に各種ケースまで記載いただきありがとうございました! 頭が硬いので上から読み込み=取得要素が存在していなければエラー、という理解から、関数定義の中でも、取得要素の読み込みより先に書かれているのになぜ未定義的な扱いにならないのか、と悩んでいましたが解消しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問