createCheckbox() without label inserts unnecessary <div>

[stigmollerhansen]

trafficstars

Using createCheckbox() without specifying a label creates an element wrapped in a

. By comparison, createInput() simply inserts an element. For consistency and ease of having to style checkboxes with CSS it would be desireable if createCheckbox() with no label specified behaved like createInput().

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [X] DOM
• [ ] Events
• [ ] Friendly error system
• [ ] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Details about the bug:

• p5.js version: 1.4.0
• Web browser and version: Google Chrome 93.0.4577.82 (Official version) (x86_64)
• Operating System: MacOSX 10.14.6
• Steps to reproduce this:

function setup() { createCanvas(400, 400); let s = createCheckbox(); let f = createInput(); }

function draw() { }

(examine created elements and their associated HTML code with the browser's developer inspector)

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[samdelong]

Please provide some screenshots or code snippets of the generated HTML!

[awelles]

Here's code + output showing what I think @stigmollerhansen is describing.

This:

function setup() {
  createCanvas( 400, 400 ); 
  let s = createCheckbox( 'label', false );
  let f = createInput();
}

function draw() {
}

produces this, grouping the checkbox and label in a div:

<div>
  <input type="checkbox" id="3anqiyphfc8">
  <label for="3anqiyphfc8">label</label>
</div>
<input value="" type="text">

This, with no label given to createCheckbox:

function setup() {
  createCanvas( 400, 400 );
  let s = createCheckbox();
  let f = createInput();
}

function draw() {
}

produces this:

<div>
  <input type="checkbox">
</div>
<input value="" type="text">

I believe @stigmollerhansen is suggesting that if not given a label createCheckbox should produce this instead:

<input type="checkbox">
<input value="" type="text">

[stigmollerhansen]

Exactly what I meant, @awelles!

Thank you for your follow-up code example and for bringing this issue to my attention again.

[reejuBhattacharya]

@limzykenneth @outofambit I attempted to solve this issue and noticed that, in the createCheckbox function, we create the surrounding<div> and append the checkbox to it before validating whether argument[0], i.e, 'label' is null or not. This creates the unnecessary <div> in question.

A simple workaround would be to add an else block after the if statement which validates whether 'label' is null or not. This else block would simply return a checkbox using addElement without any surrounding <div>, as there is no label element.

However, this approach does not seem sufficiently robust nor elegant. Another approach would be to create the surrounding <div> and addElement after validating the 'arguments', but that would shuffle around the code quite a bit.

I would greatly appreciate your thoughts on this matter, and I would proceed accordingly. Cheers!