# Unexpected behaviour with select method in instance mode

**URL:** https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612
**Category:** Coding Questions
**Created:** [April 24, 2021, 8:00pm UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612 "2021-04-24T20:00:58Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![afkqs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/afkqs/32/12925_2.png) [@afkqs](https://discourse.processing.org/u/afkqs)
#### Post date: [April 24, 2021, 8:00pm UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612/1 "2021-04-24T20:00:58Z")

</div>

Hi there,

I started a project that uses p5.js in instance mode and I’m encountering 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.

```auto
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 ditherType = this.elt.value;
    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_);

    // show element...
  }

};

let myp5 = new p5(sketch);

```

Thanks for your help.

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 24, 2021, 8:28pm UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612/2 "2021-04-24T20:28:51Z")

</div>

hi! Welcome to the forum!

I get error at this line

```javascript
    let optionsContainer = p.select('#options--container');

```

but did you already create this element in the html file? I only see `option--container` not `options--container` and they are classes. If I add

```auto
    <div id="options--container"></div>

```

to the html, it works fine for me.

---

<div class="post-metadata">

### Author: ![afkqs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/afkqs/32/12925_2.png) [@afkqs](https://discourse.processing.org/u/afkqs)
#### Post date: [April 24, 2021, 11:34pm UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612/3 "2021-04-24T23:34:06Z")

</div>

Hi Micuat,

Yes apologies, my HTML file looks like that:

```auto
<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>

```

As you mentioned I have also a css class called `.option--container`.

So when you’re running the code, you can select the element fine?

Here’s how it looks for me. Selecting the element using p5js method returns a weird object named radioOption, with width and height set to 0 (first line). Using the native `getElementById()` method works as expected (second line).

 ![p5js_issue](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1b02a014c875ee23e1f867bbc1cf44e7411e72d8.png)

Many thanks

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 25, 2021, 9:38am UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612/4 "2021-04-25T09:38:23Z")

</div>

ok I see, it happens when you select the dropdown box, right? I don’t know why, and it would be great if you can open an issue on p5.js github repository. For now as a solution I would suggest to store dom elements as a variable. This makes the code a bit tidier and more efficient than searching with `p5.select` or `document.getElementById` every time.

[https://editor.p5js.org/micuat/sketches/beAEiJEcK](https://editor.p5js.org/micuat/sketches/beAEiJEcK)

---

<div class="post-metadata">

### Author: ![afkqs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/afkqs/32/12925_2.png) [@afkqs](https://discourse.processing.org/u/afkqs)
#### Post date: [April 25, 2021, 9:25pm UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612/5 "2021-04-25T21:25:03Z")

</div>

Hi,

Yes it happens when I select the dropdown box but I also tried to do the same after clicking a button and the issue remains. I’m puzzled.

I will create an issue on github, thanks for your time on this 🙂

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 25, 2021, 9:45pm UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612/6 "2021-04-25T21:45:24Z")

</div>

I think I got what is happening. It’s because of the scope. If you change the callback to arrow function instead

```javascript
  const handlechange = () => {

```

and comment out `ditherType = this.elt.value`, then it works. I’m trying to make a demo to replicate the issue…

edit: sorry perhaps this is wrong. I think I got it wrong ☹ I’m sure something is wrong with `_wrapElement` internal function

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 25, 2021, 10:04pm UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612/7 "2021-04-25T22:04:38Z")

</div>

I found that when the slider is inside #threshold div, somehow `select` doesn’t work. If the slider is not inside, `select` works. Here is a small version that demonstrate the issue

[https://editor.p5js.org/micuat/sketches/YiD4oRMTk](https://editor.p5js.org/micuat/sketches/YiD4oRMTk)

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 25, 2021, 10:15pm UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612/8 "2021-04-25T22:15:18Z")

</div>

thanks for opening the issue! for the bug we continue discussion on github instead

> <https://github.com/processing/p5.js/issues/5207>
>
> \#### Most appropriate sub-area of p5.js?
> 
> \- \[\] Accessibility (Web Accessibili…ty)
> \- \[\] 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.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.