My selected Classname in javascript is showing blank string in console at the first? Why is that?

Question

I have made the tag as display:none in the css. While i am at javascript i am fecthing the element using the getElementsByClassName but the when element is clicked on the first time in debugger i am get the empty string while it works properly on the second time.Why is that?

<tr>
<img src="down.png" width="25px" onclick="clickArrow('dropDownTextArea1')"/></td>
            <td>Student 1</td>
            <td>Teacher 1</td>
            <td>Approved</td>
</tr>
<tr class="dropDownTextArea1"><td colspan="8">
            Advisor:<br /><br />
            Award Details<br />
            Summer 1-2014(TA)<br />
</td>


CSS
.dropDownTextArea1{
    display: none;
}

script::
function clickArrow(element){
  var dropDown = document.getElementsByClassName(element);
  console.log(dropDown[0]);
  if(dropDown[0].style.display === 'none'){
    dropDown[0].style.display ='block';
  }else{
    dropDown[0].style.display ='none';
  }
}

I am getting empty string on the first click.Why is that? I need a soultion for that