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)
});
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 */ });
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)
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
But if you want to use different functions as you did, you should declare the variables at the global level (outside the function blocks).
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... })