Need help writing a javascript that would based on highest text value change the color of the box to yellow

Hi Guys

Was hoping someone could help me write a javascript that would based on highest text value change the color of the box to yellow.

In the screenshot there is 4 text element each with a value with a Unique ID (text1) assigned to them i just need to have some code that would change the color based on highest input value, so when the next text element is higher than the first i need that to change back to original color and then apply the yellow to new box.

The box that needs to change has an unique ID called Number1

BoxColor.zip (439.9 KB)

Hei Ewald,
quick and dirty, not well tested: text boxes can be edited, press 'sort new' - the textbox with the highest value will turn to red.

recolorOnSort.zip (34.0 KB)

3 Likes

Hi there,
here´s a new Version with coloring corresponding boxes with gradient, you asked for. You have to define the style of your choice in the Head-HTML, eg.:

<style>.mygradient {
background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 2px,transparent 2px, transparent 4px),linear-gradient(90deg, rgb(29, 67, 158),rgb(219, 239, 242));
}</style>

Don´t forget to uncheck 'protect from external styles' in the document panel (or add an '!important' at the end of the style Definition)

image

Your script then would add the class 'mygradient' to the box, instead of setting its backgroundColor:

corrBox.classList.add ('mygradient');

Removing the class on init:

elm.classList.remove ('mygradient');

There´s a great thread about how to use gradients in Hype which also links to a very helpful website. It offers a bunch of gradient styles for your personal use.

recolorOnSortGradient.zip (30.1 KB)

3 Likes

Ktewes, thank you soo much!!!!!! for assisting me this is exactly what i needed to complete my project.

1 Like

Hi Ktewes

I need your help again please, i change some of the project based on what i need but struggling with the last part to restore the text colour back to original.

Sorry to message you directly please just help me with this part

BoxColor.zip (199.8 KB)