Return value from event handler

Ask the community
,
1

Hi everyone,

I am trying to figure out how I can return a value from an event listener, so I can use it later in my velo code. I am really new to javascript and I am not sure if that is even possible. Here is what I am trying to achieve:

let selectedMaterial = "";

	const getMaterial = (event) =>{
		selectedMaterial = event.target.value
                return selectedMaterial
	};
	
	$w("#materialFilterDropdown").onChange(getMaterial)

        console.log(selectedMaterial)

As you can see I have initially defined selectedMaterial as an empty string, and when I change the value of my dropdown, I am assigning that value to selectedMaterial. Now I want to be able to return the value of selectedMaterial outside the getMaterial function, so I can use it later. However, when I attempt to print the value of selectedMaterial outside the selectedMaterial function, I can see that its value has not been changed or rather the console.log(selectedMaterial) is executed before the value of selectedMaterial was even changed. I know I can add the console.log inside my function but I’d like to be able to check the value of selectedMaterial outside the function. Any idea how to accomplish that?

2

First, you’re setting up a function called getMaterial, this function takes an event as an argument, and does nothing except return the selected material

Then, you’re telling that function to trigger every time the dropdown changes

Then, regardless of when the dropdown changes, you simply tell the page to log selectedMaterial (which is obviously empty)

Instead:

let selectedMaterial = ''
const getMaterial = event => {
    selectedMaterial = event.target.value
    console.log(selectedMaterial)
}
$w('#materialFilterDropdown').onChange(getMaterial)

This would set selectedMaterial and then log it, every time the dropdown changes

3

Hi @DeanAyalon ,
I know that I can console log the value of selectedMaterial inside the function. My question is once selectedMaterial = event.target.value has been set, can I use this value in another function because it seems the value is only defined inside getMaterial function and cannot be accessed from outside. Is that right? What about if I wanted to pass the value of selectedMaterial to another function?

4

selectedMaterial is defined outside the function, but it only changes once the event is fired

That log line is fired as soon as the page loads, so the variable stays empty

5

@DeanAyalon But if I change the value of the dropdown, then the value of selectedMaterial will change. Now the question is how do I access its value outside of the function.

6

The value is accessible outside the function, exactly the way you have accessed is.

What you fail to understand is that the TIME OF EXECUTION of your code varies

Whatever code you write at the top level is executed only once - When the page first loads

The function itself is executed when the change event occurs
But the event occurring does not make the log line you wrote execute again, because it already happened

7

@DeanAyalon Thank you for your answer. Now that makes more sense :slight_smile: I am really sorry if my question was kind of stupid.

8

Not at all, the asynchronous execution can be a bit hard to grasp at first