Figured out a solution to checking the other boxes:
This code just checks the seconds box to see if its being typed in and changes the others. This code is on my codepen so you can go check it out and test.
–> https://codepen.io/Mike-was-here123/pen/qoVwxR?editors=0010
function zeroCheck(input1, id1, input2, id2) {
if (document.getElementById(id1).value.length < 2 === true) {
return (document.getElementById(id1).value = "0" + Number(input1));
}
if (document.getElementById(id2).value.length < 2 === true) {
return (document.getElementById(id2).value = "0" + Number(input2));
}
}
var hours = document.getElementById("hours").value;
var minutes = document.getElementById("minutes").value;
var seconds = document.getElementById("seconds").value;
setInterval(function() {
if (document.getElementById("seconds").value !== seconds) {
console.log("seconds");
for (var i = 0; i <= 2; i++) {
zeroCheck(
document.getElementById("minutes").value,
"minutes",
document.getElementById("hours").value,
"hours"
);
}
seconds = document.getElementById("seconds").value;
}
if (document.getElementById("minutes").value !== minutes) {
for (var i = 0; i <= 2; i++) {
zeroCheck(
document.getElementById("hours").value,
"hours",
document.getElementById("seconds").value,
"seconds"
);
}
minutes = document.getElementById("minutes").value;
}
if (document.getElementById("hours").value !== hours) {
for (var i = 0; i <= 2; i++) {
zeroCheck(
document.getElementById("minutes").value,
"minutes",
document.getElementById("seconds").value,
"seconds"
);
}
hours = document.getElementById("hours").value;
}
}, 1);
Here is how it works:
I get the initial value of each of the items
var hours = document.getElementById("hours").value;
var minutes = document.getElementById("minutes").value;
var seconds = document.getElementById("seconds").value;
Then i do a set-interval loop of 1 millisecond.
setInterval(function() { // 14
// code
}, 1); // 51
Lets look at the seconds (3rd box on the right w/ codepen).
if (document.getElementById("seconds").value !== seconds) {
Each iteration i check the saved value of it vs the current value. If the values aren’t the same, i know i have edited that box.
If that is true:
for (var i = 0; i <= 2; i++) {
zeroCheck(
document.getElementById("minutes").value,
"minutes",
document.getElementById("hours").value,
"hours"
);
}
This run the other boxes (minutes, hours) through the zeroCheck()
function to check if i can add 0’s because i know they are not being edited.
In ZeroCheck()
function:
if (document.getElementById(id1).value.length < 2 === true) {
return (document.getElementById(id1).value = "0" + Number(input1));
// adding 0 plus its current single digit value "0"+"5" = "05"
}
This is just one of the if statements. id1
would be minutes
and input1
would be its value. Now i see if the length of the value is < 2. If that is true, i add a 0 plus its current single digit value, "0"+"5" = "05"
or "0"+"0" = "00"
.
It only does this to the boxes your not typing in.
After the loop is done:
seconds = document.getElementById("seconds").value;
Now, after checking all the other boxes, it resets the saved value to the current thing you have typed in. Now if your typing multiple characters, it just does this multiple times (Running the values of the other boxes, etc)
This is done with every box, so that is why the code is so long. Its just three of the same thing (seconds, minutes, hours).
This makes sure everything saves. Also so the other boxes are only checked once, instead of infinity and cause them to be impossible to edit.
Hope this made sense, please reply and ask questions if they don’t. I’m also learning how to type correctly, so i’m sorry if sentences were fragmented or short.