I want to toggle a price. When doing this with a button element which has an eventListener it works. (Please see my question and solution here). Now I replaced the buton with an
input type="checkbox" because I want to build a switch-toggler witth CSS. But in doing so, the eventlistener does not work anymore – but I used the same ID as with button. I’ve wrapped the toggle elements in a DIV:
<div id="button" > <!-- Switch moves. But price does not change --> <label> <input type="checkbox"> <span> </span> </label> </div>
Doing this, the price changes – but the toggler-switch did not:
<!-- Switch does not moves. But price changes --> <label> <input id="button" type="checkbox"> <span> </span> </label> <!-- </div> -->
I tried to embed the button element in the span – but it does not work.
Has this something to do with capturing and bubbling (which I don’t really understand yet) or is it again sth. in the CSS I miss. Or a complete misunderstanding of another concept?
Please check the codepen
Best + stay healthy,