How can I use the ternary operator in Javascript to determine if something is even or odd?

Question

So I need to figure out how to store "p" tags into an array, and then use the ternary operator to determine if the "p" tag is even or odd.

1. Is my Array correct for storing the "p" tags?
2. How can I use the ternary operator to loop through and automatically set even/odd (I have to use different color backgrounds for evens and odds for read-ability)

this is what I have so far. I know how to manually code the evens/odds in. But I can't seem to find any help the ternary operator to loop through my code and check to see what "p" tags are even or odd.

function paragraph()
{

   list = new Array();

   var list = document.getElementsByTagName("p"); 

   var even = list[0];
   var odd = list[1];

   even.style.backgroundColor = "#CCFFFF";
   odd.style.backgroundColor = "#CCFFCC";
} //end of paragraph()

I seem to really struggle with arrays and loops. So any help would be greatly appreciated. Thanks in advance.

Answer 1

1. Is my Array correct for storing the "p" tags?

You actually don't need list = new Array(); because document.getElementsByTagName("p") returns a collection of all p tags which you can loop.

2. How can I use the ternary operator to loop through and automatically set even/odd (I have to use different color backgrounds for evens and odds for read-ability)

You need to use for loop to enumerate list, then check if the index is odd or even by using (i % 2 > 0) condition and apply the ternary operator as below

var list = document.getElementsByTagName("p");
for (i = 0; i < list.length; i++) {
    list[i].style.backgroundColor = (i % 2 > 0) ? "#CCFFCC" : "#CCFFFF";
}

Please note that array index starts from 0, so when i equals 0, it's odd because list[0] is the first element and when i equals 1, it's even because list[1] is the second element, and so on.

Working demo: http://jsfiddle.net/6ub3fd7b/

Answer 2

The ternary operator is just a convenience so that one may avoid having to write code like this:

var somevar = 0;

if (some_condition) {
    somevar= "somevalue";
}
else
if (another_condition) {
   somevar = "anothervalue"
}

It doesn't solve the problem at hand; it just saves you from typing multiple lines of code by providing the syntax of a one-liner.

If you were to take advantage of cascading style sheets, that which would simplify the javascript, if you were to use it to change the classname of each 'p' tag as follows :

<style>
p { background:#FFF; }
p.even  {font: 150% Arial,Helvetica;background: #FCC; color:#f00}
p.odd   {font: 150% Arial,Helvetica;background: #CCF;color:#369}
</style>

var ptags = document.getElementsByTagName("p"); 

for (i = 0; i < ptags.length; i++) {
    ptags[i].className = ( i % 2 )? 'odd' : 'even';
}

See http://jsfiddle.net/ngmgv263/3/

The workhorse operator here is the modulus or modulo as it's sometimes called. If the result of that operation is non-zero then the background style will be of class 'odd' otherwise the class changes to 'even.' The advantage is that anytime you may wish to change the pair of colors, you don't need to modify the javascript -- only the background values for the even and odd 'p' tag classes. Also, you wouldn't need to modify the JavaScript in case you wanted to have alternating font colors; you would just specify them in the even and odd classes for 'p' tags as I do in the example code.

In this case the ternary operator works with the results which will only be either zero or one, which aids in rendering the alternating colors. If we wanted to have three alternating background styles, then the math would be 'i % 3'in which case instead of using a ternary operator you'd need either to to use a switch statement or an 'if (condition) else if (condition) else ...' control structure since there would be three possible results, zero, one and two and the ternary deals with only two at a time, although you could use a nested ternary but that would likely overly complicate the code and make it less legible.