エラー内容
<script language="javascript">
document.write(
'<input type="button" ' +
'onClick="formChange(this.form, \'hogehoge\')"' +
'value="入力欄を増やす">'
);
</script>
<noscript>
<a href="hogehoge">入力欄を増やす</a>
</noscript>
上記のように、押すたびに入力欄が増えるように設定したところ
ボタンが動かず、開発ツールに下記エラーが出ていた。
Uncaught TypeError: frm.submit is not a function
at formChange (XXX)
at HTMLInputElement.onclick (XXX)
このエラーは、HTML内で id="submit" または name="submit" を使っているときに発生する。
これにより、フォームの submit() メソッドが上書きされ、JavaScript から form.submit() を実行しようとするとエラーが出る。
原因
1. id="submit" または name="submit" の影響
JavaScript では、HTML の id や name 属性で指定した名前が自動的にグローバル変数として登録される。
今回の場合、同HTML内の送信ボタンが下記のように
idがsubmitになってしまっていた。
<form id="myForm">
<input id="submit" type="submit" value="送信">
</form>
これだと、submit はグローバル変数として定義され、フォームの submit() メソッドを隠してしまう。
結果として、JavaScript から myForm.submit() を呼び出すと、submit が関数ではないと解釈されてエラーになる。
2. document.write() の使用
サンプルコードでは document.write() を使っているけど、これはモダンなブラウザでは避けるべき方法。これも改善が必要。
document.write() はページの読み込み中にのみ動作し、他の DOM 操作との競合が生じる可能性がある。
（しかし、今回はこの書き方を業務内で使用していたため、変更不可。）
解決方法
1. id や name の変更
submit の代わりに別の名前を使う。例えば、btnSubmit などに変更すると問題が解決する。
<form id="myForm">
<input id="btnSubmit" type="submit" value="送信">
</form>
2. document.write() を廃止
document.write() を使わず、代わりに DOM 操作を使ってボタンを動的に追加する方法に変更する。
DOM操作とは
DOM操作（Document Object Model 操作）とは、
WebページのHTML要素をJavaScriptで動的に変更・操作すること。
これにより、ページの内容をリアルタイムで更新したり、新しい要素を追加したり、ユーザーのアクションに応じて反応させることができる。
例えば、ボタンを追加したり、クリックされたときに何かを表示したりすることができる。
document.getElementByIdで要素を取得し、innerHTMLで内容を変更したり、appendChildで新しい要素を追加したりできうｒ。
DOM操作は、ページ全体を再読み込みすることなく、必要な部分だけを変更できるため、ユーザーにとってよりインタラクティブな体験を提供できる。
DOM操作を使うとできること：
- HTML要素の取得: ページにある要素（例えば、ボタンや入力フィールド）をJavaScriptで取得。
- 要素の変更: 取得した要素の内容や属性を変更（例えば、ボタンのラベルを変更）。
- 要素の追加・削除: 新しい要素をページに追加したり、既存の要素を削除したりする。
- イベントの設定: ユーザーの操作（クリックや入力）に反応するようにイベントを設定。
例えば、document.write() ではなく、DOM操作を使って動的にボタンを追加する場合、次のようになる：
<script>
// 新しいボタン要素を作成
var button = document.createElement("input");
button.type = "button"; // ボタンのタイプを設定
button.value = "入力欄を増やす"; // ボタンのラベルを設定
// ボタンがクリックされた時に実行する関数を設定
button.onclick = function() {
formChange(this.form, 'hogehoge');
};
// ページにボタンを追加
document.body.appendChild(button);
</script>