Slider Calculator. Cannot calculate local variables

Ask the community
,
1

Im fairly new to javascript having only had a little experience in python however i feel as if I am making an easy mistake here so I’ll try and keep my question simple.

I am trying to calculate the sum of numbers for 3 sliders however I cannot use the variables again outside the function to do so.

How can you use a variable again outside of the function block to make these calculations?

I have posted the code below that works in terms of generating the correct numbers and assigning them to a new variable called “newValue1” ,“newValue2” and “newValue3”.

Again I feel like I am making a beginner’s mistake but any help is much appreciated.

Thanks,

$w.onReady( function sliderValue() {

$w("#slider3").onChange((event3) => {

let newValue3 = event3.target.value; // “new value”
//console.log(newValue3) // newValue check
// changes values from 1 - 5 range to prices of parts
if (newValue3 === 1) { newValue3 = 20 }
if (newValue3 === 2) { newValue3 = 60 }
if (newValue3 === 3) { newValue3 = 90 }
if (newValue3 === 4) { newValue3 = 120 }
if (newValue3 === 5) { newValue3 = 200 }
//console.log(newValue3)
$w(“#text29”).text = newValue3.toString()
})
$w(“#slider2”).onChange((event2) => {
let newValue2 = event2.target.value; // “new value”
//console.log(newValue2) // newValue check
// changes values from 1 - 5 range to prices of parts
if (newValue2 === 1) { newValue2 = 30 }
if (newValue2 === 2) { newValue2 = 80 }
if (newValue2 === 3) { newValue2 = 150 }
if (newValue2 === 4) { newValue2 = 220 }
if (newValue2 === 5) { newValue2 = 350 }
//console.log(newValue2)
$w(“#text30”).text = newValue2.toString()
})
$w(“#slider1”).onChange((event1) => {
let newValue1 = event1.target.value; // “new value”
//console.log(newValue1) // newValue check
// changes values from 1 - 5 range to prices of parts
if (newValue1 === 1) { newValue1 = 200 }
if (newValue1 === 2) { newValue1 = 300 }
if (newValue1 === 3) { newValue1 = 400 }
if (newValue1 === 4) { newValue1 = 500 }
if (newValue1 === 5) { newValue1 = 800 }
//console.log(newValue1)
$w(“#text31”).text = newValue1.toString()
})

let myId = $w(“#slider3”).id; // “myElement”
let value = $w(“#slider3”).value; // 42
console.log(value)

});

2

In this case the shortest solution is to use only one onChange function:

 let  newValue1,  newValue2,  newValue3;
 $w("#slider1, #silder2, #slider3").onChange((event)=> {
  newValue1 = // etc...
})
3

But if you want to use different functions as you did, you should declare the variables at the global level (outside the function blocks).

4

Thanks very much JD. I’ll try this out and post a fix. I see the error now. I commented each slider element individually:

”slider1”,”slider2”,”slider3”,

as a fix but not in the way you’ve just explained.

Thanks again

5

Hello again, I still seem to be having trouble declaring this as a global variable to be used later in the script. Can anyone tell me why newValue 3 is still showing as undefined in the console please?

Thanks in advance,

let newValue3;

$w.onReady( function () {

$w("#slider3").onChange((event) => { 

    newValue3 = event.target.value; // "new value" 

})

})

console.log(newValue3)

6

FIX:

$w.onReady( function sliderValue() {

/**
* Declare and initialse varialbes to used used in entire scope
* upadte Sum within onChange
*/

let newValue3 = 0;
let newValue2 = 0;
let newValue1 = 0;
let sum = 0;

$w("#slider3").onChange((event3) => { 
    newValue3 = event3.target.value; // "new value" // CHANGED LINE EXAMPLE

// changes values from 1 - 5 range to prices of parts
if (newValue3 === 1) { newValue3 = 20 }
if (newValue3 === 2) { newValue3 = 60 }
if (newValue3 === 3) { newValue3 = 90 }
if (newValue3 === 4) { newValue3 = 120 }
if (newValue3 === 5) { newValue3 = 200 }
console.log(“newValue3”, newValue3)
$w(“#text29”).text = newValue3.toString()

    sum = newValue1 + newValue2 + newValue3; // ADDED SUM VARIABLE 
    console.log(sum); 
    $w("#text28").text = sum.toString() 
}); 

$w("#slider2").onChange((event2) => { 
    newValue2 = event2.target.value; // "new value" // CHANGED LINE EXAMPLE

//console.log(newValue2) // newValue check
// changes values from 1 - 5 range to prices of parts
if (newValue2 === 1) { newValue2 = 30 }
if (newValue2 === 2) { newValue2 = 80 }
if (newValue2 === 3) { newValue2 = 150 }
if (newValue2 === 4) { newValue2 = 220 }
if (newValue2 === 5) { newValue2 = 350 }
console.log(“newValue2”, newValue2)
$w(“#text30”).text = newValue2.toString()

    sum = newValue1 + newValue2 + newValue3; // ADDED SUM VARIABLE 
    console.log(sum); 
    $w("#text28").text = sum.toString() 
}); 

$w("#slider1").onChange((event1) => { 
    newValue1 = event1.target.value; // "new value" // CHANGED LINE EXAMPLE

//console.log(newValue1) // newValue check
// changes values from 1 - 5 range to prices of parts
if (newValue1 === 1) { newValue1 = 200 }
if (newValue1 === 2) { newValue1 = 300 }
if (newValue1 === 3) { newValue1 = 400 }
if (newValue1 === 4) { newValue1 = 500 }
if (newValue1 === 5) { newValue1 = 800 }
console.log(“newValue1”, newValue1)
$w(“#text31”).text = newValue1.toString()
sum = newValue1 + newValue2 + newValue3; // ADDED SUM VARIABLE
console.log(sum);
$w(“#text28”).text = sum.toString()
});

/**
* Everything outside of onChange handlers only called once!
* These lines are never called again… unless onReady is called again
* move sum into the onChange Functions
*/

});

7

Yes. Every piece of code needs an event to trigger it. An event can be page loading, onReady(), onClick, onChange etc…
So if you put some code outside the onChange() it will run on page load (or onReady if you put it inside te onReady() ), and if you want to on other occasions (for example onChannng() event) you’ll need to put in side the onChange(), or to put in in a function that is called from inside the onCahnge().