'Why button is being clicked twice [duplicate]

<div class="btn-group btn-group-toggle button-div" data-toggle="buttons">
     <label class="btn btn-secondary" onclick="alert('option1');">
       <input type="radio" name="options" id="option1" autocomplete="off"> Option 1
     </label>
     <label class="btn btn-secondary" onclick="alert('option2');">
      <input type="radio" name="options" id="option2" autocomplete="off"> Option 2
     </label>
</div>

Hello, when I click any of these radio buttons, it seems to be clicked twice. Because I get two similar alerts. How to fix this? Bootstap 5.

Currently, I get an alert "option 1", then again "option 1".

Expected: only one alert "option 1".

htmlbootstrap-5


Solution 1:[1]

The solution was to change the "onclick" action to "change" action. Thank you all for the support towards the solution.

Solution 2:[2]

Your on click is causing the issue, wrapping it in a function will do the trick, hopefully someone can add and explain why this happens as I have completely forgotten, and can't for the life of me remember.

You basically want to change your code from this

onclick="alert('option1');"

// to this

onclick="() => alert('option1');"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vadtam
Solution 2 E_net4 - Krabbe mit Hüten

Related Questions