Welcome to My World (www.dgmayor.com)

소프트웨어/Spring, JSP, html, CSS

클릭시 텍스트 바꾸기

dgmayor 2022. 3. 31. 15:28
728x90

HTML 내의 구독 이라는 Text를 클릭 시 구독중으로 변경되도록 만들고 싶다 어떻게 해야할까

<div class="channel"> 
                <div class="metadata"> 
                    <img src="image/img.jpeg" alt="">
                    <div class="info">
                        <a href="/index.html"><span class="name">93이신재</span></a>
                        <span class="subscribers">4 subscribers</span>
                    </div>
                </div>
                <button id="subscriberBtn" type="button" onclick='change()' >구독</button>
            </div>

-> HTML

//구독중
function change() {
    const subs = document.getElementById('subscriberBtn');
    subs.innerText = '구독중'
}

-> JS
하지만 한번 구독시 구독취소는..?

const subs = document.getElementById("subscriberBtn")

subs.addEventListener("click", function() {
    if(subs.innerText === '구독') {
        subs.innerText = '구독중';
    } else subs.innerText ='구독';
});
 
728x90