选中复选框不起作用时更改HTML元素内容

问题描述

我想弄清楚单击复选框后如何更改<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";   
}

解决方法

您的if语句应该在回调函数中，当复选框得到一些更改时。像inputBtn.addEventListener("change",()=>{})