选中复选框时更改html元素内容无效

Question

我正试图弄清楚如何在单击复选框后更改<p>标记的内容。

我试着用if语句来做，但似乎什么都没发生。

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

当复选框发生一些更改时，if语句应该在回调函数中。类似inputBtn.addEventListener("change", ()=>{})