0

This is an example of my code. I had like to change a value in a function, when i enter a div. So far it works that if i enter my div, i get the text output, but my value in the Example function doesnt get changed.

So basically my problem is that i dont understand how i can return a value from a function after it got changed to another function.Im pretty new to JS and cant really figure it out whats wrong.

function Example(){
  var value=0;

    MYDIV.addEventListener("mouseenter",function (){
    
        value=10;
        console.log("Entered the Div")
        return value
    })

console.log(value)
  }
LeonaTheSun
  • 35
  • 6
  • What do you mean by "when I enter a div"? – Code-Apprentice Jul 29 '21 at 22:01
  • @Code-Apprentice based on the example code, "when I enter" means on a mouseenter event. – bburhans Jul 29 '21 at 22:02
  • What actual behavior do you want here? What do you want the user to be able to do? What should the user see as a result of moving the mouse? Let's talk about it at this level before we start talking about code details such as changing the value of a variable. – Code-Apprentice Jul 29 '21 at 22:03
  • i got a graph and when i enter this graph with my mouse, i get the console log , that my mouse went over this graph. if this happens, i had like to change my value . – LeonaTheSun Jul 29 '21 at 22:03
  • What actual behavior do you want here? What do you want the user to be able to do? What should the user see as a result of moving the mouse? Let's talk about it at this level before we start talking about code details such as changing the value of a variable. – Code-Apprentice Jul 29 '21 at 22:04
  • Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – Ivar Jul 29 '21 at 22:14

1 Answers1

0

The simple answer is "You can't".

While calling MYDIV.addEventListener You pass the function inside of it as an argument. You are not calling this unnamed function but rather asking MYDIV.addEventListener to call it for You sometime in the future.

In this particular case your unnamed function will be called after the end of Example execution. If You want to wait for this moment You can try to use Promise:

function example() {
  new Promise(resolve => {
    function handle() {
      myDiv.removeEventListener('mouseenter', handle)
      console.log("Entered the Div")
      resolve(10)
    }

    myDiv.addEventListener('mouseenter')
  }).then(function (value) {
    console.log(value)
  })
}

Or even wrap it into the async/await:

async function example() {
  const value = await new Promise(resolve => {
    function handle() {
      myDiv.removeEventListener('mouseenter', handle)
      console.log("Entered the Div")
      resolve(10)
    }

    myDiv.addEventListener('mouseenter')
  })

  console.log(value)
}
hopeless-programmer
  • 787
  • 5
  • 17
  • thank you, that answer works and also for your explanation why it didnt work. This one dont belong to the question, but do you have an advice how i could rewrite my code to avoid functions like in your answer ? – LeonaTheSun Jul 30 '21 at 07:54
  • In the most cases You can't do anything about it. The JavaScript is non blocking, which means that You can't stop in the middle of one function and wait for the other to complete. Try read about promises and async/await, this should help You to get the point. – hopeless-programmer Jul 30 '21 at 11:22