jquery - How to change the color of the class in javascript -

i have problem code , did every thing getelementbyid , works me. same code not work

 document.getelementsbyclassname("hearts"); 

my html code

status = 1;    function changestyle() {    //note lowercase first letter.    x = document.getelementsbyclassname("hearts");      if (status == 1) {      x.style.color = 'white';      status = 2;    } else if (status == 2) {      x.style.color = 'red';      status = 1;    }  }

<a onclick="javascript:changestyle();" style="color:red;" class="hearts"> code </a>

the getelementsbyclassname() method returns collection of elements in document specified class name, nodelist object.

the nodelist object represents collection of nodes. nodes can accessed index numbers. index starts @ 0.

try this:

<script>     status = 1; function changestyle() {     alert(1); //note lowercase first letter. x = document.getelementsbyclassname("hearts")[0];  if(status==1) {     x.style.color = 'green';     status = 2; } else if(status==2) {     x.style.color = 'red';     status = 1; } } </script> 

jsfiddle