Create Vertical Radio Buttons

.block

height: 100
scrolling: no
border: no

index.html

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

sketch.js

/**
 * Create Vertical Radio Buttons (v1.0.1)
 * GoToLoop (2019-Apr-07)
 *
 * https://Discourse.Processing.org/t/
 * how-to-organize-radio-buttons-in-separate-lines/10041/5
 *
 * https://Bl.ocks.org/GoSubRoutine/5b18d019959031f517fc218667faa688
 */

"use strict";

let radio;

function setup() {
  createCanvas(150, 100);
  noLoop();

  radio = createRadio().position(20, 25).changed(redraw);

  radio.option('male', color('cyan'));
  radio.option('female', color('pink')).checked = true;
  radio.option('prefer not to say', color('orange'));

  encloseEachInputLabelPairIntoASubDiv(radio);
  fixRadioDivElement(radio);
}

function draw() {
  background(radio.value());
}

function encloseEachInputLabelPairIntoASubDiv(radioDivElement) {
  const inputs = selectAll('input', radioDivElement),
        labels = selectAll('label', radioDivElement),
        len = inputs.length;

  for (let i = 0; i < len; ++i)
    createDiv().parent(radioDivElement).child(inputs[i]).child(labels[i]);
}

function fixRadioDivElement(radioDivP5Element) {
  radioDivP5Element._getInputChildrenArray = function () {
    return this.elt.getElementsByTagName('input');
  }
}

I have tried and used your sketch which is very useful. But with OpenProcessing I received this error message:

p5.js says: selectAll() was expecting String for parameter #1 (zero-based index), received object instead. (http://p5js.org/reference/#p5/selectAll)

Is it possible to eliminate this annoying message?

Thank you for your work and your answer.

JBR

Is it possible to eliminate this annoying message?

@jbroux, the minified "p5.min.js": https://cdn.JsDelivr.net/npm/p5
which is being used by my sketch here, doesn't have such warnings.

https://Bl.ocks.org/GoSubRoutine/5b18d019959031f517fc218667faa688

Thank you for yours answer. You are right there is no bug message with p5.min.js but the message remains with openProcessing where it is impossible to change p5.min.js but it works! Sorry for disturbing you and thank you again for yours answer. JB Roux

…

Le 23 avr. 2020 à 07:29, GoSubRoutine ***@***.***> a écrit : @GoSubRoutine commented on this gist. Is it possible to eliminate this annoying message? @jbroux <https://github.com/jbroux>, the minified "p5.min.js": https://cdn.JsDelivr.net/npm/p5 <https://cdn.jsdelivr.net/npm/p5> which is being used by my sketch here, doesn't have such warnings. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/5b18d019959031f517fc218667faa688#gistcomment-3265869>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APA72UPAVEWALFW7BB3XGPTRN7G5LANCNFSM4L2GFJZA>.

@jbroux, according to p5::selectAll() method's reference, its optional 2nd parameter can be of 3 diff. datatypes:
https://p5js.org/reference/#p5/selectAll

Parameter container -> String: id, p5.Element, or HTML element to search within (Optional).

On my sketch function encloseEachInputLabelPairIntoASubDiv() is invoked by passing variable radio as its argument:

encloseEachInputLabelPairIntoASubDiv(radio);

And variable radio is of datatype p5.Element btW:

radio = createRadio().position(20, 25).changed(redraw);

B/c p5::createRadio() (and also p5.Element::position() & p5.Element::changed()) returns an instance of p5.Element:
https://p5js.org/reference/#/p5/createRadio

Returns -> p5.Element: pointer to p5.Element holding created node.

Therefore my function encloseEachInputLabelPairIntoASubDiv() is fully compliant to p5js' docs when invoking p5::selectAll() method:

function encloseEachInputLabelPairIntoASubDiv(radioDivElement) {
  const inputs = selectAll('input', radioDivElement),
        labels = selectAll('label', radioDivElement),
        len = inputs.length;

The message "selectAll() was expecting String for parameter #1 (zero-based index), received object instead." shouldn't happen!
B/c that 2nd parameter can be either a String or an object (p5.Element is an object btW).

If you want it, you can let them know about it:
https://github.com/processing/p5.js/issues