Bug with createRadio(): it doesn't create separate radios

p5.js Beginners
1

I want to include three separate set of radio buttons in my code and for that I am using createRadio() three separate times, such as: radio1 = createRadio(), radio2 = createRadio(), radio3= createRadio().

But there seems to be a major bug: all of them reference the same object - they cannot be selected separately (e.g. if I chose one option from radio1 that will uncheck any selected option for the other two radios and vice versa) and whenever I call a method on any of them it returns the same value (e.g. after selecting option1 for radio1 calling .value() on radio2 will return the value for option1 of radio1).

What to do with this? Am I guessing right that this is a bug? Should I report it somewhere? How to get around it? I really need those sets of radio buttons.

2

Hey,
there is no bug here actually, you just miss something about the behavior of inputs radios. Radio buttons are grouped by the name attribute you give to them. It means that you can have a complete destructured HTML and still keep radios buttons linked :

<div>
  <input name="radioGroup">

   <div>
      <input name="radioGroup">
   </div>
</div>

<section>

<article>
     <div>
      <input name="radioGroup">
     </div>
</article>
</section>

You can take a look to the MDN page for further explantions : <input type="radio"> - HTML (HyperText Markup Language) | MDN
And the P5 documentation says that you can pass the name of the radio group when you call createRadio()

Then if you want to create differents radio groups, you need to give different ones :

let radioGroup, radioGroup2;

function setup() {
  
  radioGroup = createRadio('group1');
  radioGroup2 = createRadio('group2');

  
  radioGroup.option('cool');
  radioGroup.option('super');
  radioGroup.option('great');
  radioGroup.style('display', 'flex');
  
  radioGroup2.option('cool2');
  radioGroup2.option('super2');
  radioGroup2.option('great2');
  radioGroup2.style('display', 'flex');
  
  console.log(radioGroup)
}
1 Like
3

Thank you for your explanation and suggestion!

It is not a bug then indeed, but the feature is not properly documented in p5js reference.

1 Like