DOM 요소 자체를 변수에 저장하자

 

Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편

무엇이든 처음 공부할 때는 기본기부터 빠르게 정복해야 한다. 그래야 그 분야에 재미를 느끼며 빠르게 적응할 수 있다. 《Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편》은 자바스크립트를 통해 웹 프로그래밍에 입문하는 사람들이 가장 먼저 배워야 할 기본 문법을 웹 분야 베스트셀러 저자인 고경희 선생이 모아 엮은 책이다. 137개 예제를 통해 직접 프로그램을 만들면서 기본 문법을 흥미롭게 배운 뒤 ‘1분 복습’, ‘마무리 실습’, ‘연습 문제’ 등

저자

고경희

출판

이지스퍼블리싱

출판일

2019.03.26

- doit 자바스크립트 기본 편 실습

 

아래와 같은 참가 신청 명단을 작성하는 프로그램이다.

input에 값을 입력하면 아래 div에 추가되도록 한다.

이때 입력창은 다시 빈 값이 들어가도록 해야하는데 그대로 남아있는 모습을 볼 수 있다. 

왜일까??

 

function newRegister() {
  var newP = document.createElement("p");
  var userName = document.querySelector("#userName").value;
  var newText = document.createTextNode(userName);
  newP.appendChild(newText);
  document.querySelector("#nameList").appendChild(newP);
  userName = "";
}

입력값을 받는 input 의 id = userName 이다.

이 js 코드에서는 userName 에 해당 인풋의 value값을 가지고와서 

가장 아래 줄에서 거기에 "" 빈 문자열을 할당하려고 하고있다.

그러나 동작하지 않는다.

왜냐하면 변수 userName이 갖는 값은 input.value 인 string 이다. 따라서 input 이 갖는 속성에 접근하지 못한다.

 

function newRegister() {
  var newP = document.createElement("p");
  var userName = document.querySelector("#userName");
  var newText = document.createTextNode(userName.value);
  newP.appendChild(newText);
  document.querySelector("#nameList").appendChild(newP);
  userName.value = "";
}

두번째째 코드에서는 #userName 아이디를 갖는 요소를 userName 변수로 가지고왔다

그다음 마지막줄에서 input 요소의 value값에 접근하여 "" 빈 문자열을 할당한다.

이때는 요소에 제대로 접근하여 동작한다.

---

아주 사소한 것일 수도 있겠으나, 내눈에는 똑같은데 이게 왜 안되는지 이해가 안됐는데

내 눈에 똑같다고 컴퓨터에게도 같은건 아니라는것을 알게 되었다 ^ _ ^

 

지금까지 리액트를 많이 사용해서 자바스크립트의 기초적인 것도 모르거나 까먹은 것이 많은데 

결국은 기본이 중요한 거니까 게을리하지말아야겠다. 

 

변수에는 요소 자체를 할당하자 !