1

I've been trying to make this work for a while and for some reason the colors aren't updating. If I had to guess, it has to do with my returning an invalid string, but I'm not sure. The intended result is it converts the hours, minutes, and seconds into hexadecimal values respectively, but for some reason it is not working. If anyone can help it would be greatly appreciated. Thanks!

var div = document.getElementById("full");

function getclockColor() {
  var h = toString(today.getHours());
  var m = toString(today.getMinutes());
  var s = toString(today.getSeconds());
  color = '#' + h + m + s;
}
return color;
}

function changeColor() {
  div.style.backgroundColor = getclockColor();
}

setInterval(changeColor, 1000);
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#full {
  position: absolute;
  height: 100%;
  width: 100%;
}
<link rel="stylesheet" type="text/css" href="/Users/zanolon/Desktop/Color Clock/Clock.css">

<div id="full"></div>

Improve this question
6
  • 2
    "For some reason" = Uncaught SyntaxError: Illegal return statement. Open your console, it's telling you this. You're prematurely closing your function right before return. After you fix that, it will tell you today is undefined. Commented Jan 24, 2018 at 15:00
  • 1
    what is today.getHours()? I don't see today defined anywhere. For that matter, what is toString()? This doesn't look like javascript code, that's probably your first problem Commented Jan 24, 2018 at 15:00
  • Format that code....indent properly, you will see the syntax error. Also where is today defined? Commented Jan 24, 2018 at 15:01
  • @epascarello I did Commented Jan 24, 2018 at 15:01
  • 1
    @Zanolon Learn to use your console! Errors should be there telling you the problems. Commented Jan 24, 2018 at 15:02

2 Answers 2

Reset to default
2

You have multiple errors:

  1. You are invoking return outside your getclockColor function (and you have an extra }).
  2. There is no today object. From your code I assume you want a Date object newly generated (with the current date). You can create a Date object like this: new Date().
  3. This is not an error, but just so you know, you don't need to convert the numbers to string. It will automatically cast the values to string when concatenating to a string with the + operator.
  4. Consider adding a zero when the number only contains one digit, because otherwise you will find many cases where the string generated will have less than 6 digits (plus the #).
  5. The idea doesn't make that much sense, because you are combining three "random" numbers into a string. In many cases this won't result in a valid hex color string. You could try using the hsl format instead, which looks like this: hsl(120, 100%, 50%). You can achieve this easily with string templates: ` hsl(${h}, ${m}%, ${s}%) `

var div = document.getElementById("full");

function getclockColor() {
  const today = new Date()
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  color = '#' + h + m + s;
  return color;
}

function changeColor() {
  div.style.backgroundColor = getclockColor();
}

setInterval(changeColor, 1000);
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#full {
  position: absolute;
  height: 100%;
  width: 100%;
}
<link rel="stylesheet" type="text/css" href="/Users/zanolon/Desktop/Color Clock/Clock.css">

<div id="full"></div>

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

Comments

1

Several issues:

  • You have an extra dangling } there (Which is why you're getting the illegal return statement). You cannot return when not in a function.
  • Also, today is not set anywhere.
  • There is no function called toString(). toString() is a method on number, so you can call it like so: today.getHours().toString()
  • You might want to consider 0 padding your h, m, and s if they're < 10, as you may be getting invalid hex codes (4 characters long), which may not be what you're looking for.

See this (Be aware, the color is changing, but because it's using the hex code :

var div = document.getElementById("full");

function getclockColor() {
    var today = new Date();
    var h = today.getHours().toString();
    var m = today.getMinutes().toString();
    var s = today.getSeconds().toString();
    var color='#'+h+m+s;
    return color;
}

function changeColor() {
    console.log(getclockColor());
    div.style.backgroundColor = getclockColor();
}

setInterval(changeColor, 1000);
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#full {
  position: absolute;
  height: 100%;
  width: 100%;
}
<div id="full"></div>

To fix the potential 0 padding issue, see below (Grabbed pad from this question):

var div = document.getElementById("full");

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

function getclockColor() {
    var today = new Date();
    var h = today.getHours().toString();
    var m = today.getMinutes().toString();
    var s = today.getSeconds().toString();
    var color='#'+pad(h,2)+pad(m,2)+pad(s,2);
    return color;
}

function changeColor() {
    console.log(getclockColor());
    div.style.backgroundColor = getclockColor();
}

setInterval(changeColor, 1000);
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#full {
  position: absolute;
  height: 100%;
  width: 100%;
}
<div id="full"></div>

Improve this answer

7 Comments

Why are people upvoting this? It doesn't work. It's outputting invalid 5 digit hex codes, and stops working after 5 or so iterations.
@jmcgriz It's because of the fact that he's outputting seconds, and when it's less than < 10, it's not 0 padded. I've added console logging to show this. When it's outputting < 0 seconds, the hex code looks like this #10914.
@FrankerZ lol I know why it doesn't work, I'm just asking why people were upvoting broken code :(
Because I've explained the reasoning behind it.
@FrankerZ but it's not a correct answer, the code still doesn't work even if you explained why it doesn't
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.