특정 글자수 이상시 활성화 기능

50자 이상 작성후 체크시 버튼이 활성화 되는 기능을 만들어보자.

<div class="txtBox">
        <textarea name="" id="" class="txt" maxlength="500"></textarea>
    </div>
    <div class="countBox">
        ( <span class="count">0</span> / 500 )
    </div>
    <input type="checkbox" name="username" class="user" id="username" onclick="is_checked()" >
    <label for="username">체크해주세요.</label>
    <a href="javascript:;" class="btn">버튼</a>

const checkbox = document.getElementById('username');
    const txt = document.querySelector('.txt');
    const btn = document.querySelector('.btn');
    let count = document.querySelector('.count');

    txt.addEventListener('input', function() { 
        if (txt.value.length < 50) {
            btn.classList.remove('active');
            
        }if(txt.value.length > 50 && checkbox.checked){
            btn.classList.add('active');
        }
        txt.value = txt.value.substr(0, 500);
        count.innerHTML = txt.value.length
    });

        function is_checked() {
            if(txt.value.length > 50){
                btn.classList.add('active');
            }if(checkbox.checked == false){
                btn.classList.remove('active');
            }
        }

input 이벤트를 사용하여 if문으로 50글자 이상 && 체크박스 체크시 버튼에 클래스가 추가되는 기능입니다.
50글자미만이거나 체크박스 미체크시 버튼활성화가 안됩니다.