Changing html element content when checkbox is checked not working

Question

I'm trying to figure out how to change the content of my <p> tag once I click the checkbox.

I tried doing it with a if-statement, but nothing seems to happen.

HTML:

<label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
</label>


<div class="pricing-box pricing-box-active" id="basic">
    <h2>Basic</h2>
    <div class="price">
        <p>$199.99</p>
    </div>
</div>

JS:

var inputBtn = document.querySelector("input")

if(inputBtn.checked === true) {
    console.log("Toggle is checked")

    var basic = document.querySelector("#basic .price p"); 
    basic.textContent = "$19.99";   
}

Answer 1

Your if statement should be in a call back function, when checkbox get some changes. Like inputBtn.addEventListener("change", ()=>{})