How do I parse a value using javascript?

Question

I'm going through a web development bootcamp course and doing some extra work on one of our projects. We built an RGB Color Guessing game and I'm converting it to a Hex Color Guessing Game. While there are plenty of examples online that show code I can copy and paste to make this conversion, I'd rather write my own with an understanding of how the code functions. So my question isn't so much "How do I do this one thing?" as it is "What am I doing wrong right now and why can't I do it this way?" and then show me an example of something that works.

I've tried a few different methods I've seen online, but in each application I am not doing the logic properly as I receive "cannot set property of undefined" or "splilt() is not a function) etc.

for(var i = 0; i < squaresVar.length; i++) {
  //add click listeners to squares
    squaresVar[i].addEventListener("click", function() {
      //convert RGB clickedColorVar to hex value
        var clickedColorVar = this.style.backgroundColor;
        function rgbToHex(clickedColorVar) {
//this is where I check that the function is running and that the var is selected
console.log("inside the rgbToHex function" + clickedColorVar);

//this bit is where I am confused. I am probably not using it right.
var clickedColorVarArray = clickedColorVar.slice(clickedColorVar.indexOf("("), clickedColorVar.indexOf(")")).split(",");


//if I can get the previous line of code to work, these rgb variable values should be extracted into an array I can then selectively convert into hex values, but I haven't made it this far since before we get here the console returns "split is not a function"

var r = clickedColorVarArray[0];
var b = clickedColorVarArray[1];
var g = clickedColorVarArray[2];

return "#" + makeHex(r) + makeHex(g) + makeHex(b);
                }

//Here is the function we are calling to convert the rgb values into 2 digit hex values
function makeHex(x) {
    var hex = x.toString(16);
//I don't understand this bit either, why aren't we checking for 2 digits?
//or is this checking for one digit and then adding a 0?
    return hex.length == 1 ? "0" + hex : hex;
}
//and at last here is where I call the rgbToHex function and pass it the clickedColorVar (which is an rgb color)
rgbToHex(clickedColorVar);

I was expecting that I could get three different values, one for r, g, and b, but the way I am trying to use the .slice(), indexOf(), and .split() methods must be wrong.

Here it is in codepen: https://codepen.io/KD-Neeley/pen/PooNvWQ

Can you create a working demo of the issue you are facing here using stack snippets. Would be easier to figure out the issue. — Manish
– Manish, Commented Oct 16, 2019 at 3:12
Here it is on codepen, I'll post the link in an update too. codepen.io/KD-Neeley/pen/PooNvWQ squaresVar is selecting a group of divs from the same class and returning an array of elements — user12151635
– user12151635, Commented Oct 16, 2019 at 3:34

Sooryan · Accepted Answer · 2019-10-16 04:12:01Z

3

You are calling 'rbgToHex' function without parameter.

Change it to

//compare clicked color to picked color
    if (rgbToHex(clickedColorVar) === pickedColorVar)

Another issue found inside 'rgbToHex' function.

var clickedColorVarArray = clickedColorVar.slice(clickedColorVar.indexOf("("), clickedColorVar.indexOf(")")).split(",");

Above line should be

var clickedColorVarArray = clickedColorVar.slice(clickedColorVar.indexOf("(")+1, clickedColorVar.indexOf(")")).split(",");

Also change 'makeHex' like the following code snippet. Else it won't give you correct hex codes since you try to get hex value from 'string' instead of 'int'

function makeHex(x) {
var hex = parseInt(x).toString(16);
return hex.length == 1 ? "0" + hex : hex;
}

edited Oct 16, 2019 at 4:12

answered Oct 16, 2019 at 3:48

Sooryan

1064 bronze badges

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

1 Comment

user12151635 Over a year ago

Thank you! So the rookie mistake was not passing the parameter DOH!, adding 1 to the indexOf("(") to make it so it was sliced just after the parenthesis, that makes sense now! And I will have to study this parseInt(x), I'll look it up! Thank you so much!

Collectives™ on Stack Overflow

How do I parse a value using javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related