[디버깅] 체크박스 Input & Label 불일치 오류 고치기

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요

 

 

✅오류 내용

분명히 아래 CANNED/JARRED 에서 체크박스를 클릭을 했지만  

첫 번째 CONDIMENTS 카테고리에 있는 체크박스가 체크가 된다

아래에 다른 카테고리에서 뭘 눌러도 첫 번째 condiments 에서만 체크가 되는데

왜그럴까 오래 고민했지만 답이 바로 보이지가 않았다

 

 

그러다가 오늘 드디어 발견함! 

let condiment = ['Honey', 'Red pepper paste', 'Mayonnaise', 'Ketchup', 'Soy Sauce', 'Chilli Powder', 'Fish Sauce', 'Chilli Sauce', 'Barbeque Sauce', 'Hot Sauce', 'Mustard', 'Balsamic Vinegar', 'Vinegar', 'Apple Vinegar', 'Oriental Dressing'];
const sauceLen = condiment.length;

const category0 = document.getElementsByClassName('article-detail')[0];

function newCheck0() {
    for(let i = 0; i < sauceLen; i++) {
        const newDiv = document.createElement('div');
        category0.appendChild(newDiv);
    
        const input = document.createElement('input');
        input.type = 'checkbox';
        input.id = 'checkbox' + i;
        input.classList.add('checkbox-class');
        newDiv.appendChild(input);
    
        const label = document.createElement('label');
        label.innerHTML = condiment[i];
        label.htmlFor = 'checkbox' + i;
        newDiv.appendChild(label);
    }
};

 이렇게 각 카테고리에 구조가 같은 함수를 각각 만들어줬었는데 

input.id = 'checkbox' + i 그리고 label.htmlFor = 'checkbox' + i 를 모든 카테고리에 넣은게 문제였다 

label요소의 for 속성이 input id에 연결이 되는데 

나는 지금까지 

카테고리1
id = checkbox1, checkbox2, checkbox3
label for = checkbox1, checkbox2, checkbox3

카테고리2
id = checkbox1, checkbox2, checkbox3
label for = checkbox1, checkbox2, checkbox3

카테고리3
............

이런식으로 만들고 있었던 거다

그러니 아래에서 어떤 checkbox를 선택하든 맨 처음 적었던 id에 연결이 되고 있었던 거다

 

 

✅해결 방법

각 카테고리별로 id를 다르게 줘 보자

 

   const input = document.createElement('input');
        input.type = 'checkbox';
        input.id = 'condiment-checkbox' + i;
        input.classList.add('checkbox-class');
        newDiv.appendChild(input);
    
        const label = document.createElement('label');
        label.innerHTML = condiment[i];
        label.htmlFor = 'condiment-checkbox' + i;
        newDiv.appendChild(label);

 const input = document.createElement('input');
        input.type = 'checkbox';
        input.id = 'canned-checkbox' + i;
        input.classList.add('checkbox-class');
        newDiv.appendChild(input);
    
        const label = document.createElement('label');
        label.innerHTML = canned[i];
        label.htmlFor = 'canned-checkbox' + i;
        newDiv.appendChild(label);

이런 식으로 기존에는 checkbox 로만 통일해서 넣었던 id 앞에 

각 카테고리의 이름을 붙여서 구분이 가능하게 해줬다 

 

그랬더니 드디어 성공! 

왜 이렇게 간단한 것을 머리 싸매고 고민한 것인지... 

앞으로는 label for 작성을 할 때 연결되는 id 가 무엇인지 잘 고려해서 작성해야겠다 

 

 

 

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요