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.

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.

• javascript
• html
• css

5 Answers 5

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.

This often happen most of the time on your css content not being been loaded up fully i have my issue solved with the following code:

function yourFunction() {
   document.addEventListener("DOMContentLoaded", function(){
       // you works start here
   });
}

The simple solution is to use the EventListener . I had the same problem with the onclick but when using :

const myEl = document.getElementById('myBtn');
myEl.addEventListener('click', function () {

//Your code here

});

It works on first click!

Leaving a tip here (as I ended up here from Google)

Instead of something like:

<div
  onClick={() => {
    handleClick(rowData);
  }}
></div>

...Try adding e.stopPropagation()

<div
  onClick={(e) => {
    e.stopPropagation();
    handleClick(rowData);
  }}
></div>

This might not solve the user's specific problem, but it may solve the general problem of "The onclick is not working on first click" for others. Sorry if violating some terms or something...