#JavaScript-30일 -10

이봐, 동료 학습자, 잘 지내고 있니?

오늘 저는 Wes Bos의 #JavaScript30 시리즈 프로젝트에 대한 실험을 공유하고 있습니다.

오늘 포스트에서는 한 번의 클릭으로 여러 개의 체크박스를 선택할 수 있는 작은 구성 요소를 만드는 10일차 프로젝트를 선택했습니다. 이제 코드를 살펴보고 내가 문제에 접근한 방식과 (내 접근 방식이 어떻게 틀렸는지) 이해하려고 노력해 보겠습니다.

처음에는 HTML 및 CSS 파일이 과정에서 제공됩니다. JavaScript를 통해 논리를 추가하기만 하면 됩니다. 그러나 솔루션을 논의하기 전에 먼저 문제 설명이 무엇인지 이해해야 합니까? 그래서 문제는 체크박스가 여러 개 있는 것과 같고, 어느 하나의 체크박스를 클릭하면 다른 체크박스를 클릭하자마자 첫 번째 클릭과 두 번째 클릭 사이의 모든 체크박스가 두 번째 체크박스와 함께 체크되는 것과 같습니다.


이제 내가 이 문제에 어떻게 접근했는지 토론하십시오. 먼저 첫 번째와 두 번째로 클릭한 개체의 인덱스를 추적할 수 있다면 두 개체 사이에 있는 확인란을 선택할 수 있을 것이라고 생각했습니다. 그래서 firstChecked와 lastChecked라는 두 개의 변수를 생성하고 동일한 클릭 이벤트 유형의 모든 체크박스에 두 개의 이벤트 리스너를 추가했습니다. 그리고 첫 번째 이벤트 리스너에서 첫 번째 체크박스의 인덱스로 firstChecked 변수를 업데이트하고 두 번째 이벤트 리스너에서 lastChecked 에 대해 동일한 프로세스를 업데이트하려고 했습니다.

그런 다음 이제 두 확인란 사이의 인덱스를 선택하고 선택해야 한다고 생각했습니다. 그러나 여기에 캐치가 있습니다. 동일한 유형의 이벤트가 단일 이벤트로 작동하는 동일한 객체에 두 개의 다른 이벤트 리스너를 추가했기 때문에 분명히 그 당시에는 그것을 깨닫지 못했습니다. 두 개의 다른 확인란을 클릭한 후 firstChecked 및 lastChecked의 값을 기록하는 콘솔을 시작했지만 동일한 색인이 표시됩니다. 코드에 따라 동일한 인덱스가 표시되지만 그 당시 논리가 실망스럽다는 것을 이해하지 못하는 저에게는 해당됩니다.

디버깅을 계속했습니다. 1~2시간 정도 지나서 제 실수를 깨닫고 Wes가 직접 제시한 솔루션을 보기로 했습니다. 그리고 맞았습니다. 여기에 그 문제의 해결책이 있습니다. (여기에서 문제 파일을 다운로드할 수 있습니다GitHub repo.

const checkboxArray = [...document.querySelectorAll("input[type=checkbox]")];

let lastIndex = null;
checkboxArray.forEach((box) => {
    box.addEventListener("click", handleCheck);
});
function handleCheck(e) {
    let flag = false;
    if (e.shiftKey && this.checked) {
        // console.log(lastIndex, "inside if");
        checkboxArray.forEach((box) => {
            if (box.checked) {
//to check weather the checkbox we are at is working is checked or not.
                flag = !flag;
            }
            if (flag) {
                box.checked = true;
            }
        });
    }
    lastIndex = this;
    console.log(lastIndex);
}

// in the below approach(what I thought) the main fault is that 
//the two separate event lister of the same event type will always 
//take action at simulteneously. so i cannot get the separate 
//value of the last checked checkbox after checking next checkbox.

// let firstIndex = null,
//  secondIndex = null;
// console.log(checkboxArray);
// checkboxArray.forEach((box) => {
//  box.addEventListener("click", firstBox);
// });
// checkboxArray.forEach((box) => {
//  box.addEventListener("click", secondBox);
// });
// function firstBox(e) {
//  firstIndex = checkboxArray.indexOf(this);
//  console.log(firstIndex);
// }
// function secondBox(e) {
//  if (e.shiftKey) {
//      secondIndex = checkboxArray.indexOf(this);
//  }

//  console.log(secondIndex);
// }

작업 모델을 볼 수 있습니다here..
따라서 이야기의 교훈은 이러한 유형의 근본적인 실수를 피하기 위해 코드에서 사용하는 방법이나 기능의 기본을 이해하는 것입니다.