for구문 / array(배열) 연습

문제.

input요소에 문자열을 입력하고 저장 버튼을 누르면 입력한 문자열을 읽어와서 msgs 배열에 누적(저장) 시켜보세요.

그리고 msgs 배열의 값을 p요소에 입력하여 출력되게 해보세요.

 

<잘 못된 코드>

저장버튼을 1번 클릭하고 두번째 클릭할때는 이전에 로그에 남았던 기록이 지워지는 줄 알고 p요소를 만들고 출력하는 것 전체를 for문으로 감쌌음.

 

확인해보니 버튼을 1번째 클릭시 저장됬던 내용은 브라우저가 기억을 하고 있음.

(msgs.push 코드를 보면 알 수 있음. 배열에 보낸 내용이 버튼 재클릭시에도 배열에 저장되고 있음)

 

따라서 p요소는 

1번째 버튼클릭시 <p>1</p>

2번째 버튼클릭시 <p>1</p>

                        <p>2</p>

3번째 버튼클릭시<p>1</p>

                        <p>2</p>

                        <p>3</p>

 

for문에 의해서 처음 부터 다시 그려짐

 

<잘 된 코드>

버튼 클릭을 다시 해도 이전에 실행된 코드들은 기억된다는 것을 확인 후 코드를 다시 작성함.

 

버튼클릭할때마다 배열에 방이 하나씩 추가되므로, p요소도 배열에 방만큼 하나씩만 추가될 수 있도록 for문에서 뺐음.

 

사용자가 input에 얼마나 많이 입력할지 알 수 없으므로 msgs배열에 방이 얼마나 추가될지, 이에 따라 innerText를 몇줄을 작성해야할지 알 수 없음. 

따라서 버튼클릭할때마다 for문이 msgs배열의 길이 만큼실행되어 변화된 값이 있다면 새로 p요소에 입력될 수 있도록 처리하였음.