2017-10-29 5 views
0

ユーザーが生成した値をArrayに送信し、後で別のページに表示するフォームを作成しようとしています。問題は、このタイプのエラーが発生し続けていることです。nullのプロパティ 'addEventListener'を読み取ることができません。私は、これの原因が様々であることを理解しています。なぜ私はあなたが自分のコードを見て、それに問題があるかどうかを確認したいのです。ユーザーからオブジェクトを作成すると、フォームに値が生成されます。 'addEventListener' of null

私は非常にJavascriptを新しくしています。これは学校の課題ですので、提供された情報をお待ちしております。

var persons = []; 

document.querySelector("form button").addEventListener('click', 
function(event) { 

var input = document.querySelectorAll("form input"); 
var newPerson = {}; 
for (var i = 0; i < input.length; i++) { 
    newPerson[input[i].name] = input[i].value; 
    input[i].value=''; 
} 
persons.push(newPerson); 
console.log(persons); 
event.preventDefault(); 

}、false);

<form> 
     <input type="text" name="firstName" value="" placeholder="Namn" /><br /> 
     <input type="text" name="lastName" value="" placeholder="Efternamn" /><br /> 
     <input type="text" name="phone" value="" placeholder="Telefonnummer" /><br /> 
     <input type="textblock" name="injuries" value="" placeholder="Skador?" /><br /> 
     <input type="text" name="eMail" value="" placeholder="E-mail" /><br /> 
     <button>Bekräfta</button> 
     </form> 
+0

'form'の後にスクリプトをインポートするか、' window.onload'イベントを使用する必要があります –

答えて

1

ほとんどの場合、あなたのJSコードは、前に、ページのロードを実行します。したがって、スクリプトが "フォームボタン"を見つけようとすると、まだ存在しません。 のフォーム要素の後にスクリプトを移動してみてください。

+0

私に尋ねるのが気にならないなら。ただ新しいことを学びたい。 window.onloadを使用せずにこれを行うにはどうすればよいですか? –

+0

''

関連する問題