Sending Form Data to external pjs Sketch in a Canvas

Question

EDIT:

I did some more research and figured it out. Changed html bit to:

Volume: 0%<input type="range" min="0" max="1" step="0.01" value="1" onchange="Processing.getInstanceById('spaceGame').changeVolume(this.value)">100%

(obviously I gave the canvas an id as well)

Changed function to:

void changeVolume(slideAmount){
    volume = slideAmount;
    alert("Volume was changed to "+volume*100+"%");//for testing
}

Original question:

I want the volume in my processing.js sketch to change when you change an html form. Unfortunately, the form doesn't recognize the code I use in my canvas. I am not good at html, and I do not know what to do to fix this.

<canvas width="600" height="600" data-processing-sources="spacegame.pde"></canvas>
<!--Later on...-->
    Volume: 0%
<input type="range" min="0" max="1" step="0.01" value="1" onchange="changeVolume(this.value)">100%

In spacegame.pde I have this code to process the form.

function changeVolume(slideAmount){
   volume = slideAmount;
   alert("Volume was changed to "+volume*100+"%");//for testing
}

My input form isn't seeing my pde file, so firebug gives me this error: ReferenceError: changeVolume is not defined

Please tell me how I can make my canvas code recognized by the input tag. Thank you.

Answer 1

I solved my question.

I did some more research and figured it out. Changed html bit to:

Volume: 0%<input type="range" min="0" max="1" step="0.01" value="1" onchange="Processing.getInstanceById('spaceGame').changeVolume(this.value)">100%

(obviously I gave the canvas an id as well)

Changed function to:

void changeVolume(slideAmount){
    volume = slideAmount;
    alert("Volume was changed to "+volume*100+"%");//for testing
}