# Calling .selected(value) multiple times on a radio button does not change the selected option

**URL:** <https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194>\
**Category:** Coding Questions\
**Created:** [February 15, 2022, 10:23pm UTC](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194 "2022-02-15T22:23:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabiopettinati](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fabiopettinati/32/15727_2.png) [@fabiopettinati](https://discourse.processing.org/u/fabiopettinati)\
**Post date:** [February 15, 2022, 10:23pm UTC](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194/1 "2022-02-15T22:23:26Z")

</div>

I have a sketch where I create a radio button with 4 options, the last one being selected upon creation inside the setup() function.

When the sketch runs and I resize the window, I want to force selecting the last option. According to the p5.js documentation, I should simply call the selected function passing the value of the last option. This works only the first time selected() is called inside draw(), that is, the first time the window resizes. If I resize again, calling selected doesn’t change the radio button option.

What am I missing?

Thanks!

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [February 16, 2022, 9:06am UTC](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194/2 "2022-02-16T09:06:24Z")

</div>

It looks like this is a bug in p5.js. The code in p5.js for the `selected()` function simply finds a matching option and sets the `checked` attribute to true. In every browser I’ve tried this is broken. Once all of options have their `checked` attribute set it becomes impossible to programmatically set which option is selected. I’ve come up with a simple patch to fix it (see the code fro the fix button):

https://editor.p5js.org/Kumu-Paul/full/OrBlrTxJv

Note, for whatever reason it is important to click `fix` first in this demo for it to work. It would seem that having multiple options with the checked attribute set to true puts them in a bad state, preventing selection in the future.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [February 16, 2022, 9:15am UTC](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194/3 "2022-02-16T09:15:46Z")

</div>

I’ve filed a bug: [The selected function for radio buttons created with createRadio does not work when making multiple changes to which option is selected. · Issue #5603 · processing/p5.js · GitHub](https://github.com/processing/p5.js/issues/5603)

---

<div class="post-metadata">

**Author:** ![fabiopettinati](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fabiopettinati/32/15727_2.png) [@fabiopettinati](https://discourse.processing.org/u/fabiopettinati)\
**Post date:** [February 16, 2022, 11:25am UTC](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194/4 "2022-02-16T11:25:31Z")

</div>

Paul dude… thanks for the clever workaround. Couldn’t be simpler and it works!😊

---

<div class="post-metadata">

**Author:** ![fabiopettinati](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fabiopettinati/32/15727_2.png) [@fabiopettinati](https://discourse.processing.org/u/fabiopettinati)\
**Post date:** [February 17, 2022, 8:03pm UTC](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194/5 "2022-02-17T20:03:26Z")

</div>

I played with Paul’s sketch a bit more and noticed that while it fixes the radio button behavior, it seems that once I manually select any option, clicking on the next button no longer works reliably. A post in stack overflow mentioned manually checking the “checked” attribute by selecting the proper option using its ID. I modified Paul’s sketch, removing the Fix button and adding his corrected selected() function directly to the radio P5 element, adding different IDs to the options and manually setting the selected option’s checked attribute to true. It works just fine when I manually select an option.

[Modified radio button fix](https://editor.p5js.org/fabiopettinati/sketches/fqWe2z-a8)

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [February 17, 2022, 8:18pm UTC](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194/6 "2022-02-17T20:18:45Z")

</div>

Nice catch.

It turns out that browser actually track the checked state for radio button inputs using a JavaScript property separately/in addition to the `checked="true"` attribute 🤦‍♂️. I’ve updated my workaround sketch with the following (which I think is simpler and doesn’t require giving the options id attributes):

```auto
        // When clearing the state
        self._getOptionsArray().forEach(option => {
          option.checked = false;
          option.removeAttribute("checked");
        });

```

```auto
            // When setting the selection
            option.setAttribute("checked", true);
            option.checked = true;

```

---

<div class="post-metadata">

**Author:** ![fabiopettinati](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fabiopettinati/32/15727_2.png) [@fabiopettinati](https://discourse.processing.org/u/fabiopettinati)\
**Post date:** [February 17, 2022, 8:47pm UTC](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194/7 "2022-02-17T20:47:35Z")

</div>

Your new sketch inded addresses the issue without IDs. Thanks.