CODEWITHSUNDEEP
javascriptvariablescanvas
user5251652
user5251652

Reputation:

Passing many variables to another function in javascript

So I have coded a small javascript to pass on few variables to another function however when I am running it nothing is happening any idea where am I going wrong? 

    <canvas id="canvas" width="1350" height="400"
    style="background-color:#333" onmousemove="F(event)">
    </canvas>


    <script type="text/javascript">
    function Reset() 
    {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "30px Arial";

        ctx.fillStyle = "#333";
        ctx.fillRect(0,0,1350,400);
    }


    function F(e,x1,y1,x2,y2)
    {
        var mouseX, mouseY;
        var xyz,xx,yy,xxx,yyy;

        xx = x1;
        yy = y1;
        xxx = x2;
        yyy = y2;

        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "30px Arial";
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(xx,yy,xxx,yyy);

        Handler(mouseX,mouseY);
    }

    function Handler(val,val1)
    {
        mouseX1 = val;
        var mouseX2,mouseY2,mouseY1,mouseX1;
        mouseX2 = mouseX1 + 20;
        mouseY2 = mouseY2 + 20;
        mouseY1 = val1;
        document.getElementById("x").innerHTML= mouseX1;
        document.getElementById("y").innerHTML= mouseY1;

        F(e,mouseX1,mouseY1,mouseX2,mouseY2);
    }
    </script><center>
    <p id="x"></p><p id="y"></p>

In the above code I am trying to pass out few values to the function F() to draw a rectangle according to the values forwarded. However I see nothing any idea where am I going wrong?

Thanks

Upvotes: 0

Views: 73

Answers (3)

Aruna Tebel
Aruna Tebel

Reputation: 1466

When you receive the event to the Handler function, pass it back to the F function again. Otherwise e is not defined inside F

function Reset() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";

  ctx.fillStyle = "#333";
  ctx.fillRect(0, 0, 1350, 400);
}

function F(e, x1, y1, x2, y2) {
  var mouseX, mouseY;
  var xyz, xx, yy, xxx, yyy;

  xx = x1;
  yy = y1;
  xxx = x2;
  yyy = y2;

  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(xx, yy, xxx, yyy);
  Handler(e, mouseX, mouseY);
}

function Handler(e, val, val1) {
  var mouseX2, mouseY2, mouseY1, mouseX1;
  mouseX1 = val;
  
  mouseX2 = mouseX1 + 20;
  mouseY2 = mouseY2 + 20;
  mouseY1 = val1;
  document.getElementById("x").innerHTML = mouseX1;
  document.getElementById("y").innerHTML = mouseY1;
  F(e, mouseX1, mouseY1, mouseX2, mouseY2);
}
<canvas id="canvas" width="1350" height="400" style="background-color:#333" onmousemove="F(event)"></canvas>
<center>
  <p id="x"></p>
  <p id="y"></p>

Upvotes: 1

parameciostudio
parameciostudio

Reputation: 590

You should separate the tasks of F function:

//mousemove = F(event)
//keep your code clear: F handle only the event
function F(e) {
//handle mouse positon and set vars
Rect(x1,y1,x2,y2)
}
function Rect(x1,y1,x2,y2)
{
//draw rectangle
//you don't need to call F function again: mouseover is still watching mouse position
}

Upvotes: 0

Blindman67
Blindman67

Reputation: 54109

One function calls another which in turn calls the calling function. All that will happen is that your browser will slow for a bit and then you script with throw a call stack overflow error.

You can not have the two functions call each other without providing a way to return (exit) from either function.

What you have done is below. How are they to ever return (exit)?

function A(){
   B(); // this never returns
}
function B(){
   A(); // this never returns
}
A();

As I am not sure what you want I can not provide a solution but to say remove one of the calls

function A(){
   B(); // this returns
   // so now this can finnish,
}
function B(){
   // dont call first function
   // let it exit
}
A();

Upvotes: 1

Related Questions