개수를 늘리는 게시판 만들기

글의 내용에 따라 적을 수 있는 공간을 추가하기

게시글을 적을 때 적을 내용이 추가됨에 따라 적을 수 있는 공간을 추가하는 버튼을 만들어 보도록 하겠습니다.

 

내용 추가하기 예시

Javascript 작성하기

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    const contentsPlus = document.querySelector(".contents__plus");
    const contentsMinus = document.querySelector(".contents__minus");
    const contentsAdd = document.querySelector(".contents__addbox");
    let fieldsetCount = 1;

    contentsPlus.addEventListener("click", () => {
        fieldsetCount++;
        if(fieldsetCount <= 5){
            if(fieldsetCount > 1){
                contentsMinus.classList.remove("hide");
            }
            if(fieldsetCount == 5){
                contentsPlus.classList.add("hide");
            }
            const newFieldSet = document.createElement("fieldset");
            newFieldSet.className = `field${fieldsetCount}`;
            newFieldSet.innerHTML = `
                <legend class="blind">게시글 추가하기</legend>
                <div>
                    <label for="boardImg${fieldsetCount}" class="img__upload">사진 첨부하기</label>
                    <input type="file" id="boardImg${fieldsetCount}" name="boardImg${fieldsetCount}" class="inputStyle2">
                    <p>과정을 알 수 있는 사진이 있다면 올려주세요.</p>
                </div>
                <div>
                    <label for="boardContents${fieldsetCount}">레시피 -${fieldsetCount}단계</label>
                    <textarea name="boardContents${fieldsetCount}" id="boardContents${fieldsetCount}" rows="20" class="inputStyle" placeholder="구체적인 레시피의 내용을 적어주세요. 최대 다섯 장까지 가능합니다."></textarea>
                </div>
            `
            contentsAdd.appendChild(newFieldSet);
            document.querySelector(`.field${fieldsetCount}`).scrollIntoView({behavior: "smooth"});
        }
    });

    contentsMinus.addEventListener("click", () => {
        contentsAdd.removeChild(document.querySelector(`.field${fieldsetCount}`))
        fieldsetCount--;
        if(fieldsetCount == 1){
            contentsMinus.classList.add("hide");
        }
        if(fieldsetCount < 5){
            contentsPlus.classList.remove("hide");
        }
        document.querySelector(`.field${fieldsetCount}`).scrollIntoView({behavior: "smooth"});
    });
</script>

Javascript 정리해보기

• 내용을 추가하고, 삭제하는 버튼에 대한 선택자를 만들어 주었습니다.
• fieldset이 추가될 공간인 contents__addbox에 대한 선택자를 만들어 주었습니다.
• 게시글을 적을 수 있는 fieldset은 5개로 제한을 두기위해 fieldsetCount라는 변수를 만들어 초기값으로 1을 저장해주었습니다.

 

• contentsPlus에 대한 클릭함수
• 우선 클릭하면 fieldsetCount에 ++연산을 먼저 해줍니다. (fieldset 개수)
• fieldsetCount가 1보다 크다면 contentsMinus의 classList에서 hide를 제거합니다. ( 내용 삭제하기 버튼 )
• fieldsetCount가 5라면 contentsPlus의 classList에 hide를 추가합니다. ( 내용 추가하기 버튼 )
• newFieldSet 변수를 만들어 fieldset 태그를 추가하는 내용을 저장합니다.
• newFieldSet에 저장된 fieldset의 class는 fieldsetCount를 사용해 번호를 적어 넣었습니다.
• newFieldSet에 innerHTML을 사용하여 추가하고자 하는 내용을 넣고, 각각의 label과 input에 fieldsetCount를 사용하여 id값을 주었습니다.
• contentsAdd에 appendChild를 사용하여 newFieldSet을 추가합니다.
• gsap를 사용하여 클릭 시 fieldsetCount이 붙은 class를 추적해 화면을 이동합니다.

 

• contentsMinus에 대한 클릭함수
• contentsAdd에 removeChild를 사용하여 class에 fieldCount가 붙은 요소를 제거합니다. ( 현재 fieldCount 요소 == 마지막요소 )
• Plus와 반대로 fieldsetCount에 - - 연산을 해줍니다.
• fieldsetCount가 1이라면 contentsMinus의 classList에 hide를 추가합니다.
• fieldsetCount가 5보다 작다면 contentsPlus의 classList에 hide를 제거합니다.
• 마찬가지로 gsap를 이용하여 화면을 이동합니다.

Tip !

contentsAdd에 직접 innerHTML += 을 사용하여 내용을 계속 추가하니 fieldset의 생성과 제거는 잘 작동 되었지만 contentsAdd에 추가했던 fieldset에 내용을 적고 추가하면 계속해서 내용이 초기화 되어 newFieldSet이라는 변수에 내용을 추가하여 appendChild를 사용했습니다.

 

 

 

이상으로 추가 버튼이 가능한 게시판을 만들어 보았습니다 !