onclick 在第一次点击时不起作用

Question

我正在处理一个 JavaScript 项目，我需要在摄氏度和华氏度之间切换。 HTML 在这里

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

这是 JavaScript 函数

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';
    }
}

我使用的 CSS 已给出

.temperature-celsius {

}
.temperature-fahrenheit {
    display: none;
}

如果您想在此处查看此应用程序，请点击此处链接

请单击此链接以查看正在运行的应用程序

如果您访问上面的链接并检查，您会发现在第一次点击时切换不起作用。但是，当您第二次单击时，它开始正常工作。

原文由 ZiaUllahZia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它不起作用，因为这个 if (fahrenheit.style.display === 'none') 将返回 NULL，因为元素上没有内联样式。此方法不会“查看”CSS，它仅适用于内联样式。你可以试试这个：

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

在纯 JS 中检查 CSS 属性，或者您可以使用 JQuery，这将在一行代码中解决它。

原文由 Varin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

首次加载应用程序时， toggleFahrenheit 和 toggleCelsius div 都没有 style 属性。他们从 CSS 获取显示规则，没错，但他们自己没有 style 。

因此，请考虑一下您的代码会看到什么。 fahrenheit.style.display 为空，因为该块还没有 style 属性。因此， fahrenheit.style.display === 'none' 评估为假。结果，执行了 else 块，最终显示摄氏度。不幸的是，这是显示的默认块，因此第一次单击不会执行任何操作。

第二次单击有效，因为在代码执行一次后，现在两个 div 块都有一个 style 属性。

要解决这个问题，您应该将默认样式属性放在 div 标签上，或者翻转代码中的逻辑，以便您首先检查摄氏度块，因为这是默认显示。

就个人而言，我会使用类来切换显示行为。

 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>

是的，我在示例中使用 -40 度，因为我很懒，而且我碰巧知道这在两个系统中是相同的温度（：

原文由 Auroratide 发布，翻译遵循 CC BY-SA 3.0 许可协议