[javascript] 여러가지 input 작성, scroll, object 길이 파악하기

 

1) 여러가지 input 작성 후 값 불러오기

- 정확히 말하면 input 값에다가 버튼 클릭 시 값이 전달되게 하는 것

- 단계를 한 가지 더 둠(정확한 event.target.value 값을 찾기 위함)

 

  const $english = document.querySelector(".matrix-input-eng-middle");
  const $korean = document.querySelector(".matrix-input-kor-middle");

  const english = $english.value;
  const korean = $korean.value;

 

2) scroll

- 한정된 공간에서 div값이 추가 될 때마다 길이가 늘어남 방지

- 참고 : https://unikys.tistory.com/285

[Javascript] div (overflow:scroll) 스크롤을 가장 아래로 내리기

.matrix-item-list {
    flex: 1;
    /* 헤더를 제외한 모든 높이 차지 */
    overflow-y: auto;
    /* 스크롤 기능 */
    height: 500px;
    overflow: scroll;
}

 

3) object의 길이 파악하기

- oject.keys(파악하고자 하는 값).length

- 참고 : https://hianna.tistory.com/452

[Javascript] 객체(Object) 속성(property) 개수 구하기

const easyCount = Object.keys(wordDataSet.easy).length;
    const middleCount = Object.keys(wordDataSet.middle).length;
    const advanceCount = Object.keys(wordDataSet.advance).length;

    let checkedCount = 0;

    for (let i = 0; i < easyCount; i++) {
      const easyCheckedCount = wordDataSet.easy[i].status;
      console.log(easyCheckedCount);
      if (easyCheckedCount === "C") {
        checkedCount += 1;
      }
    }

    for (let i = 0; i < middleCount; i++) {
      const middleCheckedCount = wordDataSet.middle[i].status;
      console.log(middleCheckedCount);
      if (middleCheckedCount === "C") {
        checkedCount += 1;
      }
    }

    for (let i = 0; i < advanceCount; i++) {
      const advanceCheckedCount = wordDataSet.advance[i].status;
      console.log(advanceCheckedCount);
      if (advanceCheckedCount === "C") {
        checkedCount += 1;
      }
    }
    console.log(checkedCount);