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

非常に恥ずかしい質問ですがいまいち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>

行動規範の内容に同意します

回答2件

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

javascript
1window.onload = function() {
2  var msg = document.createElement("input");
3  msg.id = "msg";
4  msg.setAttribute("type", "text");
5
6  var button = document.createElement("input");
7  button.setAttribute("type", "button");
8  button.value = "確認";
9  
10  // ここで確認ボタンのonclickイベントへ関数をバインドする
11  button.onclick = function() {
12    alert(msg.value)
13  }
14  
15  document.getElementById("result").appendChild(msg);
16  document.getElementById("result").appendChild(button);
17}

投稿2015/08/21 06:59

編集2015/08/21 07:03

hy3

総合スコア600

true

2015/08/21 07:05

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

行動規範の内容に同意します

ベストアンサー

変数 confirm を関数の外で定義すればいいのかな？
試してませんが。

JavaScript
1var confirm; 
2windlow.onload = function(){
3    ...
4    confirm = function(){
5        ...
6    };
7};

余談ですが、init() を関数定義して呼び出す意味はまったくないです。
中身を関数の外に出してそのまま実行した方がいいでしょう。

投稿2015/08/21 06:27

garamond

総合スコア150

true

2015/08/21 06:48

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