SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript quick help

    Hello, I'm having a problem where I can't acess the variables "this.x" and "this.width" from where I want. I know why just dont know how to solve it... Please help me.

    Code:

    Code:
    function SpecialObject() {
    	this.x = 0;
    	this.y = 0;
    	this.width = -1;
    	this.height = -1;
    	this.src = '';
    	this.img = new Image();
    	
    	this.draw = function() {
    		this.img.src = this.src;
    		if (this.width == -1) this.width = this.img.nativeWidth;
    		if (this.height == -1) this.height = this.img.nativeHeight;
    		this.img.width = this.width;
    		this.img.height = this.height;
    		ctx.drawImage(this.img, this.x, this.y);
    	}
    	
    	this.needBoundaries = function() {
    		canvas.addEventListener('mousemove', function(e) {	
    			if (mouseX > this.x && mouseX < this.x + this.width) {
    				console.log("asd");
    			}
    		}, false);		
    	}
    	
    }
    
    SpecialObject.prototype.setWidth = function(w) {
        this.width = w;
    };

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    What you've done seems right so far. Now all you have to do is to create specialObject from the SpecialObject constructor, and it's from specialObject that the this keyword will apply.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if I wasn't clear, I've done that already the problem is, when I add in this code:


    console.log(this.x + " - " + this.width);
    Like this:

    function SpecialObject() {
    this.x = 0;
    this.y = 0;
    this.width = -1;
    this.height = -1;
    this.src = '';
    this.img = new Image();

    this.draw = function() {
    this.img.src = this.src;
    if (this.width == -1) this.width = this.img.nativeWidth;
    if (this.height == -1) this.height = this.img.nativeHeight;
    this.img.width = this.width;
    this.img.height = this.height;
    ctx.drawImage(this.img, this.x, this.y);
    }

    this.needBoundaries = function() {
    canvas.addEventListener('mousemove', function(e) {
    if (mouseX > this.x && mouseX < this.x + this.width) {
    console.log("asd");
    }
    console.log(this.x + " - " + this.width);
    }, false);
    }

    }

    SpecialObject.prototype.setWidth = function(w) {
    this.width = w;
    };
    the output is:

    undefined - 1280
    and if I do this:

    this.needBoundaries = function() {
    canvas.addEventListener('mousemove', function(e) {
    if (mouseX > this.x && mouseX < this.x + this.width) {
    console.log("asd");
    }
    console.log(this.x + " - " + this.width);
    }, false);
    console.log(this.x + " - " + this.width);
    }
    ouput:

    0 - -1
    undefined - 1280
    Which means something is not right with the x variable.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2011
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're not replying to Paul's response but are reposting your question? What on earth makes you do that? Also, I'm wondering why you are so proficient in writing Javascripts but do not know the principles of the use of this? If this is a homework assignment at which you just copied and pasted the script that you were supposed to analyze, be honest about it and tell us.

  5. #5
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul's didn't make a question... though I'm just saying that I've done what he sad but I forgot to say it on the first post.
    To awnser your question.. I'm being totally honest, if I'm proficient its because I'm used to program Java. If I don't know the principles of the use of "this" is because this is my first attempt on making a project in javascript and I don't have javascript lessons... so I'm a totally newbie trying to learn...

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by joaogl View Post
    I'm being totally honest, if I'm proficient its because I'm used to program Java.
    I won't go in to why Java is not JavaScript here, but it can be an interesting discussion to have at some other time.

    The reason why the this keyword is not retrieving the x property, is because the canvas doesn't have that property on it.
    Why the canvas? Because that is the context under which the function is being run.

    Code javascript:
    canvas.addEventListener('mousemove', function(e) {

    If you want to refer to the specialObject object, it can help to cache a reference to it so that you can then refer to it later on.

    Code javascript:
    this.needBoundaries = function () {
        var objRef = this; // local reference to specialObject
        canvas.addEventListener('mousemove', function (e) {
            ...
            // use objRef.x in here to gain access to its x property
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your answer, I had that idea about the problem being the context that it was in but I would never remember of making a var with the this so thank you very much for that, though there is another problem which I'm not being able to understand.

    I added that reference as you proposed like this:

    this.needBoundaries = function() {
    var objRef = this;
    canvas.addEventListener('mousemove', function(e) {
    if (mouseX > objRef.x && mouseX < objRef.x + objRef.width) {
    console.log("asd");
    }
    console.log(objRef.x + " - " + objRef.width);
    }, false);
    console.log(objRef.x + " - " + objRef.width);
    }
    And, on another place I added a call to the setWidth once the mouse was down.

    What happens now it that the width is undefined until I click on the mouse... Output:

    0 - -1
    0 - undefined
    0 - 100
    First line is written by the last console.log(objRef.x + " - " + objRef.width);
    Second Line is written by the first console.log before the mouse clicking and finally, third line is written by the same first console.log after the mouse is down...

  8. #8
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its solved..

    The error were this two lines of code:

    if (this.width == -1) this.width = this.img.nativeWidth;
    if (this.height == -1) this.height = this.img.nativeHeight;
    it should be:

    if (this.width == -1) this.width = this.img.naturalWidth;
    if (this.height == -1) this.height = this.img.naturalHeight;
    Thank you very much for the quick help that you provided! See you soon


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •