Question

I have this code:

var max1box = document.getElementById('length'),
    max2box = document.getElementById('width'),
    max1 = 100,
    min1 = 20,
    max2 = 400,
    min2 = 10;

 max1box.addEventListener('change',validateValues,false);
 max2box.addEventListener('change',validateValues,false);


function validateValues() {

    if (this == max1box &&
        +this.value > max1 &&
        +this.value > max2box.value)
    {
       max1box = max2box;
       max2box = this;  

    }

    if (max1box.value > max1) {
        max1box.value = max1;
    }
    if (max1box.value < min1) {
        max1box.value = min1;
    }        

    if (max2box.value > max2) {
        max2box.value = max2;
    }
    if (max2box.value < min2) {
        max2box.value = min2;
    }
   }

http://jsfiddle.net/LpmnY/

In the code there’s a function which lowers the value of one box when a higher value is entered in the other box.
What I would like is for the users to be alerted of this reduction in a nice way, as they might otherwise not notice it.

So is it possible to have the box where the value gets reduced get a different background colour when this reduction happens – and then go back to normal when the box is highlighted?

Answer 1

How about using the style attribute to add a colorful border?

function validateValues() {

    if (this == max1box &&
        +this.value > max1 &&
        +this.value > max2box.value)
    {
       max1box = max2box;
       max2box = this;  

    }

    if (max1box.value > max1) {
        max1box.value = max1;
        max1box.style.border = '2px solid red';

    }else if (max1box.value < min1) {
        max1box.value = min1;
        max1box.style.border = '2px solid blue';
    }   
    else max1box.style.border = 'auto';    

    if (max2box.value > max2) {
        max2box.value = max2;
        max2box.style.border = '2px solid green';

    }else if (max2box.value < min2) {
        max2box.value = min2;
        max2box.style.border = '2px solid yellow';

    }else max2box.style.border = 'auto';

   }