javascript style if statement not being met

Question

I'm having toruble with this function, it requires two clicks before the if statement is satisfied even though in the CSS the condition should be met. On the fist click, the console shows triggered but not if state on the second click it does show if state can anyone understand why the condition is not being met?

function searchShow() {
    console.log('started');
    document.getElementById('top_line_2a').addEventListener('click', function() {
      console.log('triggered')
      var searchClickIcon = document.getElementById('top_line_2a');
      var searchClick = document.getElementById('top_line_3');
      if(searchClick.style.height == '0em') {
        console.log('if state');
        //searchClick.style.display = 'block';
        searchClick.style.height = '3em';
        searchClickIcon.style.color = 'white';
        searchClickIcon.style.textShadow = '0px 0px 7px white';
        document.getElementsByClassName('search')[0].focus();
      } else {
        //searchClick.style.display = 'none';
        searchClick.style.height = '0em';
        searchClickIcon.style.color = 'rgba(255, 187, 61, 1)';
        searchClickIcon.style.textShadow = '';
      }
    })
    console.log('added');
  }

Answer 1

When implementing ping-pong / toggle effects, try not to compare with attribute value directly. The zero height could be "0em", "0", or numeric 0. You could try normalizing the value for this one particular case:

if (parseInt(searchClick.style.height,10)==0) {
  // show the container
} else {
  // hide the container
}

A much more reliable way is to take advantage of the fact that every DOM element can be dynamically assigned new attributes. Since you already have a handle to the searchClick object:

if (searchClick.showing){
  searchClick.showing=null;
  // hide the container
} else {
  searchClick.showing=true;
  // show the container
}

"showing" is your own attribute. When you first click on it, the marker is not there, so it'll show the container (initially hidden). Then the showing flag is attached to it, so you can detect it in the next click. If your initial state is showing, then use a different flag to reverse the logic. This is a sure fire method to implement a toggle.

Answer 2

You shouldn't be using the height. Use a variable instead.

var triggered = false;
function searchShow() {
  document.getElementById('top_line_2a').addEventListener('click', function() {
    //Do stuff
    if(!triggered) {
      triggered = true;
      //Do stuff
    } else {
      triggered = false;
      //Do stuff
    }
  })
}

Checking for a style in an if statement isn't a good practice. If you ever change the size of your container for X reason, you'll also have to change the if/else statement to fit the change. It also make the code that much less clear to whoever will read it. Always try to avoid using hardcoded numbers when you can use something more effective.