제이쿼리를 자바스크립트로 바꾸고있습니다..!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery -> vanilla</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js"></script>
</head>
<body>
    <div>
        <button class="more_start"></button>
        <button class="more_start_btn"></button>
        <button class="more_start_place"></button>
    </div>
</body>
</html>

div {
    width: 300px;
    margin: 0 auto;
    display: flex;
    flex-flow: column wrap;
    gap: 20px;
}

button {
    padding: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: gray;
    background-color: white;
    border-radius: .5rem;
    border: 1px solid gray;
    box-shadow: 1px 1px 5px 5px rgb(226, 226, 226);
}

button:first-child {
    width: 60%;
    margin-bottom: 5rem;
}

button.on {
    background-color: yellow;
    color: chocolate;
}

button.off {
    background-color: black;
}

// 버튼 텍스트 변경용 함수
const addClassName = (elem) => {
    elem.innerText = elem.classList.toString();
}

 

// 클래스가 있는지 확인용 함수
const hasClass = (elem, className) => {
    return elem.classList.value.indexOf(className) !== -1 ? true : false;
}

 

// 토글 처리용 함수

const toggleClass = (elem, addClass, removeClass) => {
    elem.classList.remove(removeClass);
    elem.classList.add(addClass);
}

 

window.onload = () => {
    let btns = document.querySelectorAll('button')
    for(let i = 0; i < btns.length; i++) {
        addClassName(btns[i]);
    }

 

    let more_start = document.querySelector('button.more_start'),
        start_btn = document.querySelector('button.more_start_btn'),
        start_place = document.querySelector('button.more_start_place');

 

    more_start.addEventListener('click', e => {
        e.preventDefault();

        if( hasClass(start_btn, 'on') ) {
            toggleClass(start_place, 'on', 'off');
            toggleClass(start_btn, 'off', 'on');
        } else {
            toggleClass(start_place, 'off', 'on');
            toggleClass(start_btn, 'on', 'off');
        }

        addClassName(start_place);
        addClassName(start_btn);
    })
}