Array Index N.O. + Value

Question

Hi I have a post here http://jsfiddle.net/7ztEf/9/ that explains what i want to achieve.

I will break it down, I need to fill a div bg based on the values of an array index, these are 4 random numbers between 1-40, say the numbers returned are 5,15,25,35. The logic is if numbers range 1-10 then div bg is red, if 11-20 then blue, etc

Ive been killing myself over this, really need some advise re best way of doing this, many thanks P

function myNumbers(numbers, type) {
for (var x in numbers) {
   document.getElementById(type + x).innerHTML = numbers[x];

    /*
    here I need to query each index value and apply to ball div, ie:

    if index 0 numbers > 0) && numbers <= 10 than ball-0 div bg is red
    if index 0 numbers > 11) && numbers <= 20 than ball-0 div bg is blue
    if index 0 numbers > 21) && numbers <= 30 than ball-0 div bg is orange
    if index 0 numbers > 31) && numbers <= 40 than ball-0 div bg is green

    repeating for eack index value. 

    if index 1 numbers > 0) && numbers <= 10 than ball-1 div bg is red

    etc       

    */

}

}

myNumbers([5, 15, 25, 35], 'test-')

Ja͢ck · Accepted Answer · 2013-03-12 03:34:22Z

1

For just a few colors I would just write it out like this:

for (var x = 0, n = numbers.length; x != n; ++x) {
    var nr = numbers[x], 
        el = document.getElementById(type + x),
        color;

   el.innerHTML = nr;

    if (nr > 0) {
        if (nr <= 10) {
            color = 'red';
        } else if (nr <= 20) {
            color = 'blue';
        } else if (nr <= 30) {
            color = 'orange';
        } else if (nr <= 40) {
            color = 'green';
        }
    }
    if (color) {
        el.style.color = color;
    }
}

Demo

answered Mar 12, 2013 at 3:34

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prasath K · Accepted Answer · 2013-03-12 03:44:24Z

1

Try this..

for (var x = 0;x<numbers.length;x++) {

    el = document.getElementById(type + x);

el.innerHTML = nr;

if (nr > 0) {
    if (nr <= 10) {
        color = 'red';
    } else if (nr <= 20) {
        color = 'blue';
    } else if (nr <= 30) {
        color = 'orange';
    } else if (nr <= 40) {
        color = 'green';
    }
}
if (color) {
    document.getElementById('ball-' + x).style.backgroundColor = color;
}
}

edited Mar 12, 2013 at 3:44

answered Mar 12, 2013 at 3:38

Prasath K

5,0287 gold badges26 silver badges35 bronze badges

Comments

Blender · Accepted Answer · 2013-03-12 03:27:45Z

0

I'd do something like this:

var colors = ['red', 'blue', 'orange', 'green'];

function myNumbers(numbers, type) {
    for (var i = 0; i < numbers.length; i++) {
        var number = numbers[i];
        var color = colors[Math.floor(number / colors.length)];

        document.getElementById(type + i).innerHTML = number;
        document.getElementById('ball-' + i).style.backgroundColor = color;
    }
}

Don't iterate over arrays with the for...in syntax. That iterates over the properties of an object.

answered Mar 12, 2013 at 3:27

Blender

300k55 gold badges462 silver badges512 bronze badges

Collectives™ on Stack Overflow

Array Index N.O. + Value

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related