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:
HTML:
<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,
Sven