자바스크립트에서 html 요소 생성하기 3탄 - for loop (반복문)

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

 

 

지난 번에 id랑 label for 의 이름에 숫자가 1~100 이런식으로 자동으로 들어가게 하는 방법에 대해 오늘 풀어보려고 한다

우선 for loop 구문을 두 가지도 적용을 할 수 있을까? 에 의문을 가지고 for let 옆에 && 을 사용하여 하나의 조건을 더 작성해봤다 

 

function newCheck() {

    for(let i = 0; i < sauceLen; i++ && x = 1; x < 100; x++) {
        const leftBox = document.getElementsByClassName('article-detail')[0];
        const newDiv = document.createElement('div');
        leftBox.appendChild(newDiv);
    
        const input = document.createElement('input');
        input.type = 'checkbox';
        input.id = 'checkbox' + x;
        newDiv.appendChild(input);
    
        const label = document.createElement('label');
        label.innerHTML = condiment[i];
        label.htmlFor = 'checkbox' + x;
        newDiv.appendChild(label);
    }
}

newCheck();

결과는 망 

 

 

하나의 함수에는 하나의 loop만 사용 가능하다고 한다 

 

 

다시 단순하게 생각해보려 했고 그 다음 수정한 코드 

i 도 숫자 하나씩 커지는 거고 생각해보니 어차피 checkbox 갯수는 array에 있는 만큼만 있으면 되는 거잖아? 하고 떠올랐다

let condiment = ['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;

function newCheck() {

    for(let i = 0; i < sauceLen; i++) {
        const leftBox = document.getElementsByClassName('article-detail')[0];
        const newDiv = document.createElement('div');
        leftBox.appendChild(newDiv);
    
        const input = document.createElement('input');
        input.type = 'checkbox';
        input.id = 'checkbox' + i;
        newDiv.appendChild(input);
    
        const label = document.createElement('label');
        label.innerHTML = condiment[i];
        label.htmlFor = 'checkbox' + i;
        newDiv.appendChild(label);
    }
}

newCheck();

드디어 성공 ! 

와 너무 상식적이고 단순한 문제였는데 템플릿 리터럴 (백틱 사용) 을 알아봐야 할 지 너무 고민을 했다 

코딩이 참 신기한 게 어제는 아이디어가 안 떠올라도 오늘은 떠오를 때가 있단 말이지

이제 나머지 식재료 리스트들을 더 채워볼 수 있겠다 

 

 

 

 

 

 

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