2017-10-29 12 views
0

사용자가 생성 한 값을 Array에 보내어 나중에 다른 페이지에 표시 할 양식을 만들려고합니다. 문제는이 유형 오류가 계속 발생한다는 것입니다. null의 'addEventListener'속성을 읽을 수 없습니다. 이 문제의 원인이 다양하다는 점을 이해합니다. 내 코드를 살펴보고 문제를 발견했는지 확인하고 싶습니다.사용자를 통해 개체를 만들면 양식에 값이 생성됩니다. 'addEventListener'of null

저는 자바 스크립트에 아주 익숙합니다. 학교 과제물로 제공되는 정보에 감사드립니다.

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

'