p5.dom select('form') does not select <form> element #6836
Description
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- Build process
- Unit testing
- Internationalization
- Friendly errors
- Other (specify if possible)
p5.js version
1.9.1
Web browser and version
No response
Operating system
Windows 10
Steps to reproduce this
Steps:
- Include a
<form>element in the HTML. - Access the element in p5 using
form = select('form'). - Log the underlying HTML element of the
p5.Elementwithconsole.log(form.elt). - It's an empty div
<div></div>??
This previously worked correctly using v0.9.0 of the standalone p5.dom package. I wondered if it was an intentional change that you can no longer select by tag name, but the documentation says that "The string can be an ID, class, tag name, or a combination" and includes an example with select('canvas').
Snippet:
https://editor.p5js.org/lindapaiste2/sketches/QX6xg14AC
function setup() {
createCanvas(400, 400);
const formNativeEl = document.getElementsByTagName('form')[0];
formNativeEl.addEventListener('change', () => console.log('native form onChange fired')); // this fires
const formP5El = select('form');
formP5El.changed(() => console.log('p5 form onChange fired')); // never fires
console.log('is same el', formP5El.elt === formNativeEl); // false
console.log('native el', formNativeEl); // <form>...</form>
console.log('p5 el', formP5El, formP5El.elt); // _class {elt: HTMLDivElement, ...}, <div></div>
}
function draw() {
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="utf-8" />
</head>
<body>
<main>
<form>
<label>
<input type="checkbox" id="apples" />
Apples
</label>
<label>
<input type="checkbox" id="bananas" />
Bananas
</label>
</form>
</main>
<script src="sketch.js"></script>
</body>
</html>