Giving myself day to day tasks to do on javascript after work

JavaScript
1

right now I have created a digital clock function. Now for my next task is to change the id colour once it has hit the target number - 10. Because I am new to this and new to functions and trying everything I can to make myself understand how it works, I am struggling really bad here. Why does the popUp function not work?

                var realTime = new Date();
                var seconds = realTime.getSeconds();
                var minutes = realTime.getMinutes();
                var hours = realTime.getHours();

            function currentTime() {
                var realTime = new Date();
                var seconds = realTime.getSeconds();
                var minutes = realTime.getMinutes();
                var hours = realTime.getHours();
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }
                var digitalClock = hours + ":" + minutes + ":" + seconds;
                if (hours > 11) {
                   digitalClock += "PM" 
                } else {
                    digitalClock +=  "AM"
                }
                document.getElementById("time").innerHTML = digitalClock;
            }
            setInterval(currentTime,1000);

            function popUp() {
                var bodyColour = document.getElementById("time");
                var changeColour = document.getElementById("time").backgroundColor = "lightblue";
                document.getElementById("time").style.backgroundColor = changeColour;
                document.getElementById("time").style.backgroundColor = bodyColour;
                if (seconds = 10) {
                    bodyColour = changeColour;
                }
            }
2

You have a couple errors in your code :3

First off, you re-declare realTime, seconds, minutes, and hours inside the currentTime function. Since var is function-scoped (declared variables of the same name in different scopes will act as different variables), you only get the seconds, minutes, and hours at program runtime. Try entering in each variable in the console; you’ll see that they haven’t changed over time.

Second, you forgot to call popUp in your code. You’ll want to make sure that wherever you place it, it has access to the time (You could do something like popUp(seconds) and run the function like that).

Finally, you did assignment instead of boolean check. if (seconds = 10) should instead be if (seconds === 10) (I do this sometimes too, it’s always a ‘gotcha!’ moment :smiley:).

Here’s my version, I tried to stay as true to the original as possible.

function currentTime() {
	var realTime = new Date();
	var seconds = realTime.getSeconds();
	var minutes = realTime.getMinutes();
	var hours = realTime.getHours();
	if (seconds < 10) {
		seconds = "0" + seconds;
	}
	if (minutes < 10) {
		minutes = "0" + minutes;
	}
	var digitalClock = hours + ":" + minutes + ":" + seconds;
	if (hours > 11) {
		digitalClock += "PM"
	} else {
		digitalClock += "AM"
	}
	document.getElementById("time").innerHTML = digitalClock;
	console.log(seconds);
	popUp(seconds);
}
setInterval(currentTime, 1000);

function popUp(seconds) {
	var time = document.getElementById("time");
	if (seconds === 10) {
		time.style.backgroundColor = "lightblue";
	}
}