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

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

ただいまの
回答率

89.07%

window.onload =function() {}について教えて下さい

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 5,242

true

score 444

非常に恥ずかしい質問ですがいまいちwindow.onload=function() {}の書き方がよくわかっていません。

いま、テキストボックスとクリックボタンを用意し、クリックボタンを押すとテキストボックの値を取得して表示するシンプルなプログラムを書きました。

window.onload = function() {}のなかに全部書いて作動させたいのですが、うまくいかず、結局クリックボタンを押したときの処理はwindow.onload=とは別に用意せざるを得ませんでした。

window.onload = function(){}のなかに含ませてやれるはずだと思っているのですがどなたか書き方を教えて下さいますよう、お願い致します。

たぶん実行順序のしくみがまだよく理解できていないのだと思います。

<html>
<meta charset="utf-8">
<head>
<script>
window.onload = function() {
  var out = "<input type='text' id='msg' value=''>";
  out += " <input type='button' onclick='confirm();' value='確認'>";
  document.getElementById("result").innerHTML = out;
}
// 外側で定義すればうまくいくが形的にイマイチだと思っています(変数のスコープの問題とか)。
var confirm = function() {
  var msg = document.getElementById("msg").value;
  alert(msg);
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>

以下のように書くとmsgの内容を取得できないが書き方を工夫すればうまくいくと思っています。
<script>
window.onload = function() {
  var init = function() {
    var out = "<input type='text' id='msg' value=''>";
    out += " <input type='button' onclick='confirm();' value='確認'>";
    document.getElementById("result").innerHTML = out;
  };
  var confirm = function() {
    var msg = document.getElementById("msg").value;
    alert(msg);
  };
  init();
}
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

変数 confirm を関数の外で定義すればいいのかな?
試してませんが。
var confirm; 
windlow.onload = function(){
    ...
    confirm = function(){
        ...
    };
};
余談ですが、init() を関数定義して呼び出す意味はまったくないです。
中身を関数の外に出してそのまま実行した方がいいでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/21 15:48

    早速のご回答ありがとうございます。動きました。結局、window.onload=function(){}の中で定義した関数はロードしたあとは消えてしまうのでそれをロードした後も保持するために一番外側のグローバル変数に格納させてやらないとだめってことですかね。私の理解ではロード時に関数confirmもロードされ、いつでも呼び出せるものだと思ってしまっていたのですが。

    キャンセル

  • 2015/08/21 17:11

    関数内のローカル変数は、関数が終わった時点で破棄されます。
    よって confirm が消えるのです。
    回答はしましたが、普通は関数内で関数定義をしません。
    全部別個でやります。

    キャンセル

+1

confirmをwindow.onloadの外で定義しても何も問題ないと思いますが、どうしても関数内で完結させたいのであればinnerHTMLを使わずにDOMオブジェクトとして扱って、onclickプロパティを利用するのが良いかと思います。

window.onload = function() {
  var msg = document.createElement("input");
  msg.id = "msg";
  msg.setAttribute("type", "text");

  var button = document.createElement("input");
  button.setAttribute("type", "button");
  button.value = "確認";
  
  // ここで確認ボタンのonclickイベントへ関数をバインドする
  button.onclick = function() {
    alert(msg.value)
  }
  
  document.getElementById("result").appendChild(msg);
  document.getElementById("result").appendChild(button);
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/21 16:05

    ありがとうございます!やはり外側で定義する方が自然な感じのようですね。

    キャンセル

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る