관리 메뉴

프로그래밍 삽질 중

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

과거 프로그래밍 자료들/프로젝트

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

평부 2022. 8. 9. 23:50

 

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) 스크롤을 가장 아래로 내리기

* HTML5를 하면서 AJAX로 얻어온 데이터를 div 태그에 뿌려주다보면 넘쳐서 스크롤바가 생기는 경우가 많다. 가장 대표적인 예가 채팅 프로그램을 만들 때 가장 아래로 스크롤을 유지해야하는데, div

unikys.tistory.com

.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) 개수 구하기

Javascript에서 배열이 가지고 있는 값의 개수는 배열의 length 속성을 통해 쉽게 구할 수 있습니다. [Javascript] 배열 길이 체크, 설정하기 (length) 그렇다면, 객체(Object)가 가지고 있는 속성의 개수는 어

hianna.tistory.com

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);