onclick属性で困った件
以前、INPUTタグのonclick属性に指定したスクリプトが動かなくて原因をつかむまでに少し時間がかかったので、その時の備忘録です。
概要
下記のHTML/JavaScriptのようにSubmitされる前にonclickで何かしら処理を行いたい場合、function名を属性名と同じonclickにしていると、正常に動作しません。
onclick_test_failure.html
<!DOCTYPE html>
<HTML lang="ja">
<HEAD>
<META charset="UTF-8">
<TITLE>テスト</TITLE>
</HEAD>
<BODY>
<P>入力欄</P>
<FORM>
<INPUT type="text" id="txt">
<INPUT type="button" value="確認" onclick="return onclick(0);" id="btn_check">
<INPUT type="button" value="登録" onclick="return onclick(1);" id="btn_regist">
</FORM>
<SCRIPT>
function onclick(val) {
if (val == 0) {
window.alert("確認が押されました");
} else {
window.alert("登録が押されました");
}
}
</SCRIPT>
</BODY>
</HTML>
エラー内容
ブラウザの開発者ツールで確認してみると、コールスタックがオーバーフローしています。
Edgeの例
無限の再帰呼び出しにでもなってしまうのかな？
対応
function名をonclick以外のものに変えます。
onclick_test_success.html
<!DOCTYPE html>
<HTML lang="ja">
<HEAD>
<META charset="UTF-8">
<TITLE>テスト</TITLE>
</HEAD>
<BODY>
<P>入力欄</P>
<FORM>
<INPUT type="text" id="txt">
<INPUT type="button" value="確認" onclick="return check_txt(0);" id="btn_check">
<INPUT type="button" value="登録" onclick="return check_txt(1);" id="btn_regist">
</FORM>
<SCRIPT>
function check_txt(val) {
if (val == 0) {
window.alert("確認が押されました");
} else {
window.alert("登録が押されました");
}
}
</SCRIPT>
</BODY>
</HTML>
修正したHTMLをブラウザで表示して、「登録」ボタンをマウスでクリックしてみると…
無事、スクリプトが動作しました。
おわりに
この件は、改修案件で追加したfunctionの名称を既存から少し変えた際に起こったんですが、function名に予約語を使うなってことですね。
まあ、初歩的なミスだとは思います。