Hello. Help pass the coordinates of the cursor from the mouseMove function, the curx, cury variables that are globally declared do not change the values ​​in the function. Rather, it turns out that the function declares the local variables curx, cury, and their values ​​can be used only inside the function.

function createImage() { var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); var curx; var cury; canvas.onmousemove = mouseMove; function mouseMove(event){ curx=event.pageX-8; cury=event.pageY-8; } document.getElementById('mouseX').value=curx; document.getElementById('mouseY').value=cury; }
  • and if you do not do var curx; / var cury; ? - xEdelweiss
  • Then nothing is output at all, even that the value is undefined, meaning undefined - Pavel_L
  • I'm stupid, you are the createImage() function, in which document.getElementById ('mouseX') occurs. value = curx; document.getElementById ('mouseY'). value = cury; call once and when mouseMove is mouseMove this part of the code is not executed, use the answer @Photon - Specter
  • Why once, I just left the name createImage () - Pavel_L
  • Still, at least once, the function must transmit the coordinates - Pavel_L

3 answers 3

And why not move this:

 document.getElementById('mouseX').value=curx; document.getElementById('mouseY').value=cury;

inside the mouseMove function?

  • Then there are many functions where the coordinates of the mouse are used, and it would not be possible to transfer them all to mouseMove - Pavel_L
  • and what prevents to hang several handlers via addEventListener ? - Specter
  • And you could not write an example of such a handler, so that it would transmit the coordinates of the mouse cursor - Pavel_L
  • now, I probably won't be able to - I work at work at work ( - DreamChild

Try this:

 function mouseMove(event){ curx=event.pageX-8; cury=event.pageY-8; return { x: curx, y: cury }; }
  • Also displays undefined - Pavel_L
  • @DreamChild, where did you see event handlers that would return a value? - Specter
  • well not true. my external function receives a completely valid object as a result of calling the internal one. The question is what to pass to the internal function as an event - DreamChild
  • and where did you see the "call of the inner function"? mouseMove() or canvas.onmousemove() ? - Specter
  • Thanks to everyone, I decided to just this function LoadS () {var canvas = document.getElementById ("Canvas"); var ctx = canvas.getContext ("2d"); var curx; var cury; canvas.onmousemove = mouseMove; function mouseMove (event) {curx = event.pageX-8; cury = event.pageY-8; build (); } function build () {document.getElementById ('a'). value = curx; document.getElementById ('b'). value = cury; // well, then all the other functions are called}} - Pavel_L

http://jsfiddle.net/gwJKa/2/

works like this:

  • A cache object is created in which data is stored accordingly. Practical :-)

  • a local writer (1) function is created, which we will call from the mouseMove (2), (2) function, which will update the position of the mouse in variables and (1) which will take the position from variables and enter them into inputs.

In theory, nothing should go outside :-)

  • pass arguments to the function and do not use - cool: var writer = function (x, y) {cache ['mouseX']. value = curx; cache ['mouseY']. value = cury; }> In theory, nothing should go outside :-) apart from global curx , cury - Specter
  • @Spectre is a feature: D updated: jsfiddle.net/gwJKa/3 In general, yes, I wrote crookedly, and with the mouseMove jamb. It would be necessary to rewrite, if for good. - lampa