Блог

Главная - Вопросы по программированию - Изменение содержимого html-элемента, когда флажок установлен, не работает

Изменение содержимого html-элемента, когда флажок установлен, не работает

#javascript #html #checkbox #checked

#javascript #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";   
}

Ответ №1:

Ваш оператор if должен быть в функции обратного вызова, когда флажок получит некоторые изменения. Нравится inputBtn.addEventListener("change", ()=>{})

Комментарии:

1. Спасибо, это сработало! Знаете ли вы, как я могу вернуть стоимость содержимого обратно на $ 199,99, как только снова сниму флажок? Прямо сейчас он составляет $ 19.99

2. Вам нужно будет добавить оператор else.