Unable to update CSS coloring using JavaScript

Question

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>

Answer 1

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>

Answer 2

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>