onclick不会在第一次点击时工作

Question

我正在开发一个JavaScript项目,我需要在Celsius和Fahrenheit之间切换.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;
}

如果您想在此处查看此应用程序是链接

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

如果您访问上面的链接并检查,您会发现第一次点击切换不起作用.但是当你第二次点击它然后它开始正常工作.

Answer 1

当应用程序首次加载时，toggleFahrenheit和toggleCelsiusdiv 都没有style属性。他们从 CSS 中获取显示规则，这是事实，但他们style自己没有。

那么，请考虑一下您的代码会看到什么。 fahrenheit.style.display为 null，因为该块还没有该style属性。因此，fahrenheit.style.display === 'none'评估结果为 false。结果，该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 度，因为我很懒，而且我碰巧知道这在两个系统中是相同的温度（：

Answer 2

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

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

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