Use of callback parameter in JS functions

Asked

Viewed 289 times

0

I’m trying to use a parameter callback (I don’t know if it’s the correct term here) inside my constructor, which calls a function I defined, but every time I try to execute the code it presents me an error in the console.

Here is the button builder code:

function Botao(x, y, w, h, canvas, callback,color) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.cb = callback;
this.color = color;   

//render do botão.
this.render = function () {
 canvas.context.fillStyle = color || '#000'; // cor
 canvas.rect(this.x,this.y,this.w,this.h); // cria o retangulo(botão)
}

// verifica se o click foi na área do botao.
this.ontarget = function (pos) {      
 if (pos.x > this.x && pos.x < (this.x + this.w) && pos.y > this.y && pos.y <   (this.y + this.h)){
  this.cb(); // <-- meu problema/duvida!
  };  
}

and here’s the code where I use it:

var teste = new Canvas(400,300,teste, 0); // cria o canvas


var bt1 = new Botao(100,100,100,100, teste, function()  {console.log("teste");}); //cria o botao



function run() {
teste.upC();//renderiza o botão

bt1.render();// renderiza o botao.
window.requestAnimationFrame(run);
}
run();


function click(evt) {
 var rectNav = teste.rectNav; ; //obtêm as coordenadas do mouse na janela do   cliente.
 var pos = {
  x: evt.clientX - rectNav.left,
  y: evt.clientY - rectNav.top
 }; 

 bt1.ontarget(pos); //detecta se o click foi no botão 
}  


cEvent('click', click);

as you can see, this is a button, where when clicking on it it should return the function it assigns to the callback at the time I created it, but I can’t make it work, am I using the parameter incorrectly? The function will not work in this case of the manufacturer?

  • http://jsfiddle.net/JScheuermann/4hkb9xus/ here’s the code with the canvas builder

2 answers

2


I’ll add some corrections. You can see the diff here.

In your jsFiddle code you have a syntax error, missing a }, then I used

this.canvas.addEventListener('click', click.bind(this))

to search for clicks. I used .bid(this) so you can use the this inside function click(evt) {.

I passed a string here var teste = new Canvas(400, 300, 'minhaID', 0); that in the example was as undeclared variable.

And finally I commented //cEvent('click', click); jsFiddle was not closed and was in error.

I hope I’ve helped!

1

A button is a ui component of its application, its style (Visual) as regards position, dimensions, etc.... Shouldn’t be in the behavioral layer, in the case of Javascript.

Either draw a CSS button, "want to save line of code" use class to componentize and generate how many instances are necessary to generate others, if applicable use the bootstrap. ("how you emphasized saving time!!").

Tip: use Canvas (HTML5) to draw elements that are dynamic and not fixed components buttons of your interface!!

What would be your doubt:

Callback and functions?
Draw elements using canvas with js?
About events in javascript?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.