set multiple sliders onchange functions with changin variables

Question

I have a loop with changing parameters wich I'd like to use in a oninput function of the sliders I'm creating within that loop, but I can't get it to work. Here's a simplified version of my script:

for (var con in dict) {
    var div = document.getElementById("content");
    var conDiv = document.createElement("div");
    conDiv.innerHTML = "<b>" + con + ":</b><br>";
    var effectID = dict[con].effect_id;
    for (var param in dict[con].params) {
        var inp,span = document.createElement("span");
        span.innerHTML = " " + param + " ";
        conDiv.appendChild(span);
        inp = document.createElement("input");
        inp.type = "range";
        inp.min = vars[effectID][param].min;
        inp.max = vars[effectID][param].max;
        inp.value = dict[con].params[param];        
        inp.oninput = function(con,param,val) {
            setParam(con,param,val);
              }(con,param,this.value);      
        conDiv.appendChild(inp);
    }
    div.appendChild(conDiv);
}

What's wrong with my code?

edit: My goal: I have a set of audio effects that I want to change. Every container (con) controls an effect node via multiple parameters. All those parameters have different min- and max-values and an actual value they have right now. Via the sliders I want to be able to call a function that changes the parameters of an container. Therefore, every slider should control one effect parameter.

Denys Séguret · Accepted Answer · 2013-09-18 17:51:19Z

2

That's because the callback is called after the loop finish, so your variables have changed.

A usual trick is to use an immediately called function whose scope can store your variable values :

for (var con in dict) {
    (function(con) { // <= creates a scope and a new con variable
        var div = document.getElementById("content");
        var conDiv = document.createElement("div");
        conDiv.innerHTML = "<b>" + con + ":</b><br>";
        var effectID = dict[con].effect_id;
        for (var param in dict[con].params) {
            (function(param){
                var inp,span = document.createElement("span");
                span.innerHTML = " " + param + " ";
                conDiv.appendChild(span);
                inp = document.createElement("input");
                inp.type = "range";
                inp.min = vars[effectID][param].min;
                inp.max = vars[effectID][param].max;
                inp.value = dict[con].params[param];        
                inp.oninput = function() {
                    setParam(con,param,inp.value);
                 };      
                conDiv.appendChild(inp);
            })(param);
        }
        div.appendChild(conDiv);
    })(con);
}

edited Sep 18, 2013 at 17:51

answered Sep 18, 2013 at 11:04

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

causa prima Over a year ago

Thanks for that, but why is this.value undefined? I mean one line before the oninput function I explicitly set it to a value, but if I execute this it's undefined. I've created a fiddle to show what I mean: jsfiddle.net/RDVHr/34 And also, why is it executed on construction at all? There is no user input to process, so why is it called?

Denys Séguret Over a year ago

I think you need inp.value instead of this.value.

Denys Séguret Over a year ago

But if you don't want to call it immediately, remove the (con,param, inp.value) part.

causa prima Over a year ago

Ok, now the sliders do call setParam(), but the con and param parameters are wrong: jsfiddle.net/RDVHr/35

Denys Séguret Over a year ago

I'm not sure of your goal, so I might be wrong but maybe you want what I just edited to ?

|

Collectives™ on Stack Overflow

set multiple sliders onchange functions with changin variables

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related