Gettting a p5 sketch to receive input from an HTML dropdown menu

nsegal

I would like an html dropdown menu to set the value of a variable within my p5 sketch. In this case, the name of the variable is potential. Within index.html I have something like this:

 <select autofocus id="menu1">
      <option value=0>free particle</option>
      <option value=1 selected="selected">linear gradient upward</option>
      <option value=2>linear gradient leftward</option>
      <option value=3>energy step</option>
      <option value=4>inverse well</option>
      <option value=5>simple harmonic</option>
    </select>

In my sketch I have tried defining a function like the following that gets called within void draw():

     function myFunction() {
                potential = document.getElementById("menu1").value;
            }

This doesn't seem to work. New selections from the menu don't seem to assign a new value to potential.

lmccart

Hm that should work, have you tried logging document.getElementById("menu1").value? Perhaps the issue is that .value will return a string, so you will need to use int() to make it into a number if that's what you're going for?