javascript フォーム入力について

form のサブミットハンドラを設定する処理をまとめて、formSubmit関数化するのが不要です。なので以下のように formSubmit関数を削除して、この関数の本体でやろうとしたことを関数の外に出して window の loadリスナーで実行されるようにします。（あと、質問にあるコードだと、 form が from にスペルミスしてます）

diff

1- function formSubmit() { 2- from.onsubmit = (event) => { 3- event.preventDefault(); 4- colorChanger(); 5- return false; 6- } 7+ form.onsubmit = (event) => { 8+ event.preventDefault(); 9+ colorChanger(); 10+ return false; 11 }

この修正だけで、いったんは意図通りの動作になるのではと思いますが、あと2点、こういうふうに書くとコードを短くできますという修正を挙げておきます。

(1) colorChanger関数本体は、以下のように書くと、if･･･else･･･ が不要になります。

diff

1 function colorChanger() { 2- if (Object.keys(colorCode).includes(input.value)) { 3- colorBox.style.backgroundColor = colorCode[input.value]; 4- errorBox.classList.remove('on'); 5- } 6- else { 7- colorBox.style.backgroundColor = 'unset'; 8- errorBox.classList.add('on'); 9- } 10+ const col = colorCode[input.value]; 11+ colorBox.style.backgroundColor = col || 'unset'; 12+ errorBox.classList[col ? 'remove' : 'add']('on'); 13 }

(2) document.getElementById で要素を取得して変数に代入する4行は、idの配列を用意しておいて、これにmapメソッドを使うことで以下のように、document.getElementById を繰り返し書かなくてもよくなります。

diff

1 window.addEventListener('load', () =>{ 2 3- const form = document.getElementById('sampleform'); 4- const input = document.getElementById('color-number'); 5- const errorBox = document.getElementById('error-box'); 6- const colorBox = document.getElementById('color-box'); 7+ const ids = ['sampleform', 'color-number', 'error-box', 'color-box']; 8+ const [form, input, errorBox, colorBox] = ids.map(id => document.getElementById(id)); 9 10 const colorCode = {