체크된 항목 리스트 표시 + 스택오버플로우 질문하기

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

 

이번에 구현해 볼 기능은 왼쪽 박스에서 재료를 고르면 오른쪽 박스에 담기게 하는 것이다 

 

일단 어떻게 해야 할 지 대충 떠오르는대로 정리해봤다 

 

그 동안은 뭐 하나 추가하면 깃헙에 커밋하는 식으로만 했는데

나중에 돌아봤을 때 내가 이 기능을 구현하려고 '어떻게 생각했더라, 어떤 걸 알아봤더라, 뭘 알게 됐더라 ' 하고 까먹게 되는 것 같아서 

앞으로는 페이지에 정리 하면서 작업하려고 한다 

스택오버플로우 참고하여 작성 시작

 

 

// HOME main container - left//
// When checkboxes are checked 

const checkboxes = document.getElementsByTagName('input').type == 'checkbox';

function getChecked() {
    let checked = [];

    for (let i = 0; i < checkboxes.length; i++) {
        let checkbox = checkboxes[i];
        
        if (checkbox.checked) {
            const rightBox = document.getElementsByClassName('main-container-2')[0];
            const newDiv = document.createElement('div');
            rightBox.appendChild(newDiv);
            
            const ul = document.createElement('ul');
            newDiv.appendChild(ul);
            const li = document.createElement('li');
            ul.appendChild(li);

            li.innerHTML = i;
          }
        }

        return checked;
    };

getChecked();

위에서 참고한 것들과 지난 번 자바스크립트에서 html코드 생성하는 거 응용하여 작성해봤는데 아무 일도 일어나지 않는다ㅠㅠ 

2시간 반 째 고민하고 있는데 도저히 모르겠다... 30분만 더 찾아보고 스택오버플로우에 문의 남겨봐야겠다 

 

고민고민하다 결국 스택오버플로우에 문의를 남겼다 

 

const checkboxes = document.querySelectorAll('input[type=checkbox]');

function getChecked() {
    let checked = [];

    const ul = document.getElementById('urIngredients');
    ul.innerHTML = "";

    for (let i = 0; i < checkboxes.length; i++) {
        let checkbox = checkboxes[i];
        if (checkbox.checked) {
            
            const li = document.createElement('li');
            li.innerHTML = document.querySelector('label[for="' + checkbox.id + '"]').textContent.trim();
            ul.appendChild(li);
          }
        }
        return checked;
    };

 

 

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