Radio Buttons (Multiple Possible)

p5.js Coding Questions
1

On my sketch, I would like to have multiple groups of radio buttons.
So group 1 would be ‘Feature 1 - turn On, turn Off’,
group 2 would be ‘Feature 2 - turn On, turn Off’,
group 3 would be ’ Feature 3 - either 0, 1, 2, or 3’,
right now, with eight possibilities ( 2 + 2 +4) only 1 of the eight buttons can be chosen.
so can’t make the Group 1 choice, the Group 2 choice and then the Group 3 choice.

Does anyone have any suggestions/help?
Thanks

2

If you look at the browser inspector DOM tree, you will notice that all the radio inputs created with p5js have the same name attribute value radioOption. Each radio group needs to have a different name so they can be selected independently. You can override this with .attribute()

let radio1;
let radio2;

function setup() {
  noCanvas()
  radio1 = createRadio();
  radio1.option('black');
  radio1.option('white');
  radio1.attribute('name', 'first')
  
  radio2 = createRadio()
  radio2.option('1')
  radio2.option('2')
  radio2.attribute('name', 'second')
}
1 Like