〔初心者〕クリックで答えをアラート表示

質問

初めてのjavascriptでプログラムを作成します。
HTMLにinput type="button"をいくつか設置し、ボタンクリックでそのvalueをアラートで表示するプログラムを作りたいのですが、以下のソースを実行するとプログラムを読み込んだ時点でアラートが表示されてしまいます。
onclickにしているのですが、なぜこうなってしまうのでしょうか。
いまいち関数にパラメーターを設定する（？）という意味がわかっていないので、そこが問題なのかなとも思っているのですが、どうでしょうか。

よろしくお願いいたします。

window.onload = initAll;

function initAll(){

var allButtons = document.getElementsByTagName("input");

for (var i=0; i<allButtons.length; i++){
if(allButtons[i].type == "button"){
allButtons[i].onclick = ansQue(allButtons[i].value);
}
}
}
function ansQue(thisAns){
alert("あなたは" + thisAns + "と答えました");
}

回答No.1

t_ohta · ベストアンサー

hoge.onclick = XXX　でイベントをセットする場合、＝の右辺（XXX部分）には関数名だけを渡さなければいけません。
引数を付けて書いてしまうと、関数の実行結果が onclick イベントとしてバインドされるため、初期化時に関数が実行されてしまいます。

以下のようなプログラムにすると良いのではないでしょうか。

window.onload = initAll;
function initAll(){
var allButtons = document.getElementsByTagName("input");
for (var i=0; i<allButtons.length; i++){
if(allButtons[i].type == "button"){
allButtons[i].onclick = ansQue;
}
}
}
function ansQue(){
alert("あなたは" + this.value + "と答えました");
}

お礼

とてもわかりやすく説明していただき、ありがとうございます！
知らなかった重要なことがわかって、とてもすっきりしました！
thisの使い方がいまいちだったとわかれてよかったです！