The function is failing to provide a return value

Question

The function is failing to provide a return value

In the Game.js file, there is a function that I am working on

Game.prototype.onClick = function(event){
     var x = event.x;
     var y = event.y;
     if (this.blueDeck[0].contains(x, y)) 
       alert("Blue Deck Clicked");
}

The OnClick function is called from a function in the Main.js file

canvas.addEventListener('mouseup', game.onClick, false);

Additionally, there is a function in Card.js

Card.prototype.contains = function(x, y){
    return true;
}

Despite setting everything up, the alert message does not appear.

Interestingly, when I remove the if statement in onClick, the alert is triggered. Other functions like

this.blueDeck[0].setDeckPos(w, h);

work perfectly fine in Game.js.

I am puzzled as to why contains is not returning true.

javascript

Answer 1

Answer №1

The verification validates my initial assumption. this will refer to the DOM element. The value of this is determined at runtime, meaning it depends on how the function is called, not where or how it was defined.

You have two options:

canvas.addEventListener('mouseup', function(event) {
    game.onClick(event);
}, false);

Alternatively, if you don't require access to the element, you can utilize .bind ^[MDN] (refer to this link for a polyfill for browsers lacking native support):

canvas.addEventListener('mouseup', game.onClick.bind(game), false);

Discover more about this:

MDN - this (overview)
quirksmode.org - this (focus on event handlers)

Answer 2

The verification validates my initial assumption. this will refer to the DOM element. The value of this is determined at runtime, meaning it depends on how the function is called, not where or how it was defined.

You have two options:

canvas.addEventListener('mouseup', function(event) {
    game.onClick(event);
}, false);

Alternatively, if you don't require access to the element, you can utilize .bind ^[MDN] (refer to this link for a polyfill for browsers lacking native support):

canvas.addEventListener('mouseup', game.onClick.bind(game), false);

Discover more about this:

MDN - this (overview)
quirksmode.org - this (focus on event handlers)

Answer 3

Answer №2

An illustration of how the OP's concept operates demonstrates that the mistake is located elsewhere:

function Game(){
  this.blueDeck = [new Card()];
}

Game.prototype.onClick = function(event){
     var x;
     var y;
     if (this.blueDeck[0].contains(x, y)) 
       alert("Blue Deck Clicked");
}

function Card(){}

Card.prototype.contains = function(x, y){
    return true;
}

var g = new Game();
g.onClick(); // "Blue Deck Clicked"

Edit

When revising questions, it's important to clearly indicate the updates made. As seen in Felix's response, the method is not called by an instance of Game but by an event listener. It is crucial to remember that this is defined by the call.

Answer 4

An illustration of how the OP's concept operates demonstrates that the mistake is located elsewhere:

function Game(){
  this.blueDeck = [new Card()];
}

Game.prototype.onClick = function(event){
     var x;
     var y;
     if (this.blueDeck[0].contains(x, y)) 
       alert("Blue Deck Clicked");
}

function Card(){}

Card.prototype.contains = function(x, y){
    return true;
}

var g = new Game();
g.onClick(); // "Blue Deck Clicked"

Edit

When revising questions, it's important to clearly indicate the updates made. As seen in Felix's response, the method is not called by an instance of Game but by an event listener. It is crucial to remember that this is defined by the call.

The function is failing to provide a return value

Answer №1

Answer №2

Edit

Similar questions

AngularJS: Incorporate a loading spinner at the beginning of the document object model

A different component experiences an issue where Angular Promise is returning undefined

At what point does javascript cease execution on a webpage following a hyperlink being tapped?

Steps for storing div content (image) on server

Tips for retrieving the distance from the top of a specific div element and transferring it to another div

Struggling to populate a nested array in a dropdown using AngularJS

Utilize a dynamic approach to add the active class to navigation list items

I am currently using React to implement a feature that displays random facts for 5-second intervals. Despite no errors being displayed, the facts are not appearing on the page as expected

What is the best way to choose all checkboxes identified by a two-dimensional array?

What is the best way to display text from one text field onto another text field?

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

Analyzing data from a JSON API response for calculations

Troubleshooting: Issue with onclick event in vue.js/bootstrap - encountering error message "Variable updateDocument not found"

Verify if any choices are available before displaying the div block

Tab buttons that switch between different sections with just a click

React Hooks: Issue with UseRef not detecting events from Material UI Select component

Having trouble locating a method in $scope following angular $compile

"Modify the MySQL database each time a user changes the value in a

Is there a way for me to retrieve the locator value of a webelement?

What is the best way to access a DOM node within a withStyle component?