初めての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ベストアンサー
- 回答日時:
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の使い方がいまいちだったとわかれてよかったです!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
指定時間になったら、WEBサイト...
-
スマホ上で、左右スワイプで次...
-
Colorboxがうまく設置できません
-
フォームが空欄の時にフォーム...
-
画面遷移を行わずに同一ページ...
-
特定の文字列を複数抜き出した...
-
読み込んだQRコードをフォーム...
-
初心者です。gulpでコンパイル...
-
jsで質問です。 ボタンが二つ存...
-
階層別の組織図の自動作成について
-
GASでチェックボックスを一括of...
-
追加ボタンを押した際に ok ボ...
-
出発駅A、到着駅Bを選択すると...
-
アップロードファイルの種類に...
-
【GAS】WEBアプリでハイパーリ...
-
jQueryで同じクラス名のものを...
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
jsで質問です。 displayプロパ...
-
画面遷移を行わずに同一ページ...
-
Googleフォームで選択肢に応じ...
-
特定の文字列を複数抜き出した...
-
フロントエンドフレームワーク...
-
変数名をどのようにつけるのが...
-
【JS】selectでchangeした時の...
-
React hooksが値を返して配列変...
-
オブジェクトから任意のプロパ...
-
指定時間になったら、WEBサイト...
-
Colorboxがうまく設置できません
-
二次元配列の中の各行の要素を...
-
読み込んだQRコードをフォーム...
-
IndexedDB を使ってファイルア...
-
HTMLで作った時報アプリが動き...
-
GASに文字列として関数を入れる...
-
GASでGoogleフォームの自動返信...
-
①入力フォーム→②確認表示画面→③...
おすすめ情報