[VANILA JS NINJA] EXPENSE-TRACKER (21/05/23)

NinjaJuunzzi·2021년 5월 23일
0

[VANILA JS NINJA]

목록 보기
9/9

자식 중 원하는 요소 가져오기

부모요소.querySelector('자식 태그||클래스||아이디')

로컬스토리지 배열로 저장 및 가져오기

저장하기

        localStorage.setItem("history", JSON.stringify(removedHistory));

가져오기

  const initialHistory = JSON.parse(localStorage.getItem("history"));

innerHTML vs 요소만들어서 appendchild

  • innerHTML의 경우
 this.$target.innerHTML = ` <div class="form-control">  <label for="text">Text</label>
    <input type="text" id="text" placeholder="Enter text..." />
  </div>
  <div class="form-control">
    <label for="amount"
      >Amount <br />
      (negative - expense, positive - income)</label
    >
    <input type="number" id="amount" placeholder="Enter amount..." />
  </div>
  <button class="btn">Add transaction</button>`;

다음과 같이 코딩하고, 이벤트를 this.$target에 걸어 e.target.firstChild로 조회하면


빈 문자열 text노드가 노출된다.
innerHTML로 깡코딩하면 공백문자도 자식이되어버림. innerHTML로 코딩하는 경우 자식을

      const inputs = target.querySelectorAll("input");
      const textValue = inputs[0].value;
      const amountValue = inputs[1].value;

다음과 같이 태그명, 클래스명, 아이디명을 명시해서 받아오면된다.

  • appendChildfirstChild, lastChild등이 제대로 동작한다.
profile
Frontend Ninja

0개의 댓글