clickeEvent does not trigger when wrapped in DIV

[sh11]

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

[PaulOB]

You have 2 elements with the ID of button which is not allowed.

Change the ID on the checkbox to something else and then change the reference to it in the JS also and it should work.

[sh11]

With my teeth in my table I apologize. Actually I tried this out – leaving the checkbox completely without ID and applying the ID only to the DIV – which did not work. So I payed no attention to this. As you said, when applying a different ID to checkbox it works. Have a nice weekend.