Javascript method always returns same value

Question

I have two methods in my class. One method randomizes values, another one returns those values in a string that represents CSS color. Yet after randomization it still returns same string all the time, even though values in created object are changed. Can you please explain why?

Here's jsfiddle: https://jsfiddle.net/wpem1j9e/

function Color(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
    this.randomize = function(){
        this.r = Math.floor(Math.random() * 100);
        this.g = Math.floor(Math.random() * 100);
        this.b = Math.floor(Math.random() * 100);
        return this;
    }
    this.toString = function(){
        var cssColor = "rgb(" + r + "%," + g + "%," + b + "%)";
        return cssColor;
    }
}
var color1 = new Color (1, 1, 1);
color1.randomize().toString(); // still returns "rgb(1%,1%,1%)";

You are missing the "this" in the toString function when calling the variables — yBrodsky
– yBrodsky, Commented Mar 30, 2017 at 18:10
yBrodsky is referring to where you are using r, g, and b in your toString method. — Alexander Nied
– Alexander Nied, Commented Mar 30, 2017 at 18:11

Francis · Accepted Answer · 2017-03-30 18:10:51Z

6

Because in your toString function you are using r, g and b instead of this.r, this.g and this.b. The former are you constructor parameters.

answered Mar 30, 2017 at 18:10

Francis

3,40324 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Walk Over a year ago

Oh wow, I spent about an hour trying to figure it out! Embarrassing... Thank you! I'll accept your answer when time limit ends.

Christian Carrillo · Accepted Answer · 2017-03-30 18:21:01Z

function Color(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
    this.randomize = function(){
        this.r = Math.floor(Math.random() * 100);
        this.g = Math.floor(Math.random() * 100);
        this.b = Math.floor(Math.random() * 100);
        return this;
    }

    this.toString = function(){
    var cssColor = "rgb(" + this.r + "%," + this.g + "%," + this.b + "%)"; //new
        return cssColor;
    }
}
var color1 = new Color (1, 1, 1);
output = function () {
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML = outputDiv.innerHTML + "<br>" + color1.r + "   " + color1.g + "   " + "   " + color1.b + "<br>" + color1.toString() + "<br>";
}
output();
document.getElementById("input").onclick = function(){
    color1.randomize();
  output();
};

JLRishe · Accepted Answer · 2017-03-30 18:29:56Z

1

You can alleviate a whole lot of confusion by just ditching the use of this. It provides no benefit here.

function color(r, g, b) {
  var me = {
    randomize: function() {
      r = Math.floor(Math.random() * 100);
      g = Math.floor(Math.random() * 100);
      b = Math.floor(Math.random() * 100);
      return me;
    },
    toString: function() {
      var cssColor = "rgb(" + r + "%," + g + "%," + b + "%)";
      return cssColor;
    }
  };

  return me;
}
var color1 = color(1, 1, 1);
console.log(color1.randomize().toString());

answered Mar 30, 2017 at 18:29

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Collectives™ on Stack Overflow

Javascript method always returns same value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related