Unexpected behaviour with select method #5207
Description
Most appropriate sub-area of p5.js?
- Accessibility (Web Accessibility)
- Build tools and processes
- Color
- Core/Environment/Rendering
- Data
- 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.3.1
- Web browser and version: 87.0
- Operating System: MacOSX Big Sur 11.2
- Steps to reproduce this:
Hi there,
I'm posting my issue here after I asked on the forum and have been suggested to ask here.
I started a project that uses p5.js in instance mode and I’m getting a weird behaviour when I try to use the select() method.
In some cases, when I try to select an element in the DOM using that function, the element is not found, and a new empty div is created instead, right before the closing body tag.
Here’s a simple example that reproduces my issue. It works well when I’m using the native document.getElementById() method but not with the p5.js select() method. The part that is giving me troubles is in the handlechange() function.
let container;
let sketch = function(p) {
p.setup = function() {
container = p.createDiv();
container.class('option--container');
addInputElements();
p.pixelDensity(1);
p.noLoop();
};
function addInputElements() {
// Input 1
let selectorContainer = p.createDiv('Selector');
selectorContainer.class('option--container');
let selector = p.createSelect();
selector.id('selector');
selector.style('float', 'right');
selector.option('option_1');
selector.option('option_2');
selector.option('option_3');
selector.selected('option_1');
selector.changed(handlechange);
selector.parent(container);
selectorContainer.parent(container);
// Input 2
let thresholdContainer = p.createDiv('Threshold');
thresholdContainer.id(`threshold`);
thresholdContainer.class('option--container');
let value = p.createElement('input');
value.id(`threshold_slider_value`);
value.attribute('type', 'number');
value.attribute('min', '0');
value.attribute('max', '255');
value.attribute('value', '128');
value.style('width', '70px');
value.style('float', 'right');
value.changed(updateRangeInput);
value.parent(thresholdContainer);
let slider = p.createSlider(0, 255, 128, 1);
slider.id(`threshold_slider`);
slider.style('width', '100%');
slider.input(updateNumberInput);
slider.parent(thresholdContainer);
thresholdContainer.style('display', 'none');
thresholdContainer.parent(container);
let optionsContainer = p.select('#options--container');
container.parent(optionsContainer);
}
function updateNumberInput(event) {
let value = event.target.value;
let feedbackElt = p.select(`#${event.target.id}_value`);
feedbackElt.elt.value = value;
}
function updateRangeInput(event) {
let value = event.target.value;
let element = `#${event.target.id}`
let feedbackElt = p.select(element.replace('_value', ''));
feedbackElt.elt.value = value;
}
function handlechange() {
let thresholdElt = p.select(`#threshold`);
// element not found - new div is created instead in the DOM
console.log(thresholdElt);
let thresholdElt_ = document.getElementById(`threshold`);
// element found using the base method
console.log(thresholdElt_);
// do stuff...
}
};
let myp5 = new p5(sketch);
My HTML file looks like that:
<body>
<div id="canvas"></div>
<div id="options--container">
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<script type="text/javascript" src="/js/sketch.js"></script>
</body>
Thanks for your help.