I want to reset the previous highest lap by receiving a new highest lap but the lowest lap is also being reset.

Question

I have created a stopwatch, I want to set the highest lap to red color and lowest to green color. when I receive a new highest lap the previous highest lap is no longer the highest. I am reseting but the lowest lap is also being reset. Reset means here changing the color to white.
You may go through my code.
The highest lap should be red;
The lowest lap should be green;
And all others should be white.

The code has been inserted
https://code.sololearn.com/WsS8WSdKu9Bz/?ref=app

Answer 1

What is the expected result?

Answer 2

If you set style.color using hexadecimal, when you get style.color it returns a string representing RGB not hexadecimal.

set : cells[1].style.color = "#FF0000"
get : console.log(cells[1].style.color) // "rgb(255, 0, 0)"

set : cells[1].style.color = "rgb(255, 0, 0)"
get : console.log(cells[1].style.color) // "rgb(255, 0, 0)"

set : cells[1].style.color = "red"
get : console.log(cells[1].style.color) // "red"

Answer 3

Hi, cool project!

I take it you are programming on your phone where there isn't much space, but try to follow the code indentation rules (2 spaces inside if blocks, functions etc), and pick longer variable names! The code is pretty hard to read.

Anyway, I think the problem is in lines 158-169. You are setting `cells[1]` to red, and then, in a loop, all the others to white.

But instead, you should loop through all the laps, and in the loop check for every lap: is it the fastest? is it the slowest?

For this it may be helpful to create 2 variables `minlap` and `maxlap` that track lap times. Maybe you do that already; I'm not sure what arr2, arr3, arr4 do.

If you do that you should also be able to remove the similar looking code block (lines 172-189) below.

Answer 4

Dear Gordon , I have created a stopwatch, I want to set the highest lap to red color and lowest to green color. when I receive a new highest lap the previous highest lap is no longer the highest. I am reseting but the lowest lap is also being reset. Reset means here changing the color to white. You may go through my code.

Answer 5

Thanks Schindlabua for your kind response.

You are right, I have used Sololearn code editor to complete the code.Normally I use VS code for big project. I should do follow the identation rules but project was not completed and shared for help. Thanks for the guidance.

Yeah, cells[1] will be the first cell which has been lapped which either be the fastest or slowest. if it is the fastes the arr3[0](maxlap)will be added and cells[1].style.color=colors[1] for the minlap arr4 is being and color is green. All is working fine here. Next if cells[1].style.color=colors[red or may be green as mentioned] the other cell which has a red or green that has been a min or max which should be now white. For this I have used the for loop which is digging the cells[i] which has a suppose red color and I want to reset the cells[i] to white color which is no more the maxlap but cells[i] to white means the all cells which may include a minlap (green color) which also becomes white.
minlap and maxlap have been used as arr3&4

Answer 6

Tahir Usman Okay. On line 165 you are unconditionally overwriting the color of all laps no matter what which is why you reset it all.

A quick fix would be, to have in the loop

if (cells[i].style.color === colors[1])
cells[i].style.color = colors[0];

so the red block of code only resets red laps. And then do the same for the green part.

Answer 7

Dear Schindlabua I have already tried it but it does not reset the previous max/min laps, all the maxlaps are red and all the minlaps are green.

Answer 8

Interesting! I won't try to figure out why, we can come up with a better solution anyway: It would be cleaner to give the maxlap a CSS class called "red", and remove all red classes from other elements. Like so:

const reds = document.querySelectorAll(".red");

for(const red of reds)
red.classList.remove("red");

cells[1].classList.add("red");

And of course you need to add the necessary CSS so it actually shows as red.

Answer 9

Thank you very much ODLNT , I have been solving this problem for three weeks and askin this at every plateform but not getting the proper solution. Now I think and see the logic behind it, I was so silly was not consoling the hexadecimal. Updated my code now looking an Iphone stop watch.
Thanks and stay blessed.

Answer 10

Tahir Usman

I see this as a javascript "gotcha". Common sense says if you set a property with hexadecimal you should get hexadecimal in return. But now we know better 😉.
I'm glad I was able to help.