The onclick is not working on first click

Question

I am working on one JavaScript project, where I need to toggle between Celsius and Fahrenheit. The HTML is here

<button onclick="toggleCF();" id="toggleCF" class="button">Toggle C/F</button>

And here is the JavaScript Function

this.toggleCF = function() {
    console.log('click');
    var fahrenheit = document.getElementById('toggleFahrenheit');
    var celsius = document.getElementById('toggleCelsius');

    if (fahrenheit.style.display === 'none') {
        fahrenheit.style.display = 'block';
        celsius.style.display = 'none';
    } else {
        fahrenheit.style.display = 'none';
        celsius.style.display = 'block';
    }
}

The CSS I used is given

.temperature-celsius {

}
.temperature-fahrenheit {
    display: none;
}

If you want to check this application live here is the link

Please click on this link to see app in running form

If you visit the above link and check, you will find that on first click the toggle didn't work. But when you click the second time then it starts working normally.

Answer 1

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.

Answer 2

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 (: