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

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

Please click on this link to see app in running form

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

Answer 1

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

那么想想你的代码看到了什么。 fahrenheit.style.display为空，因为该块尚未具有style属性。因此，fahrenheit.style.display === 'none'的计算结果为false。结果，执行else块并最终显示摄氏度。不幸的是，这是显示的默认块，因此第一次点击不会做任何事情。

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

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

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

＆＃13;

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

＆＃13;

.hide { display: none; }

＆＃13;

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

＆＃13;

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

Answer 2

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

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

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

Answer 3

在大多数情况下，这经常发生在您的CSS内容没有完全加载的情况下，我的问题已通过以下代码解决：

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

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

3 个答案: