The onclick is not working on first click

When the app is first loaded, both the toggleFahrenheit and toggleCelsius divs have no style attribute. They are getting display rules from the CSS, true, but they have no style on themselves.

So think about what your code sees, then. fahrenheit.style.display is null because that block doesn't have the style attribute yet. Therefore, fahrenheit.style.display === 'none' evaluates to false. As a result, the else block is executed and you end up displaying Celsius. Unfortunately, this is the default block which is shown, so the first click doesn't do anything.

The second click works because after the code executes once, now both div blocks have a style attribute.

To fix this, you should either put default style attributes onto the div tags or flip the logic in the code so you check on the Celsius block first, since that's the default display.

Personally, I would use classes to toggle display behaviour instead.

function toggle() {
  var fahrenheit = document.getElementById("fahrenheit");
  var celsius = document.getElementById("celsius");
  fahrenheit.classList.toggle('hide');
  celsius.classList.toggle('hide');
}

.hide { display: none; }

<div id="fahrenheit" class="hide">-40 F</div>
<div id="celsius">-40 C</div>
<button onclick="toggle()">Toggle</button>

And yes, I use -40 degrees in the example because I'm lazy and I happen to know this is the same temperature in both systems (:

It does not work because this if (fahrenheit.style.display === 'none') will return NULL as there is no inline style on the element. this method won't "look" at CSS, it only works for inline styles. You could try this:

var element = document.getElementById('toggleFahrenheit'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

to check the CSS properties in pure JS or you could use JQuery which would solve it in one line of code.