我的JavaScript if.else语句是'工作不正常

My JavaScript if...else statement isn't working properly

本文关键字：工作 不正常 JavaScript if else 语句 我的      更新时间：2023-09-26

所以我对javascript还很陌生，我正在尝试使用一个简单的if…else语句在显示和隐藏div元素之间切换。我的HTML页面如下所示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
#fluffy {
            height:200px;
            width:200px;
            background-color:yellow;
            display:block;
}
#pepper {
            height:200px;
            width:200px;
            background-color:green;
            display:block;
}
</style>
</head>
<body>
<div id="fluffy"></div>
<div id="pepper" onclick="changeState()"></div>
<script type="text/javascript">
function changeState() {
var divState = document.getElementById('fluffy').style.display;
if (document.getElementById('fluffy').style.display == 'block') {
    document.getElementById('fluffy').style.display = 'none';
}
else if (document.getElementById('fluffy').style.display == 'none') {
    document.getElementById('fluffy').style.display = 'block';
} else {
    alert('test error message');
}
}
</script>
</body>
</html>

当我在浏览器中加载页面时，我会收到一个包含"测试错误消息"的警告框。我最初的代码将document.getElementById（'fuffy'）.style.display存储在一个名为divState的变量中，但这甚至没有给我一个警告框，它什么也没做。我觉得我用错了==什么的，但我真的不确定。我使用过===，当它不起作用时，我切换到===，这在上面的代码中。

如果有人知道我到底做错了什么，我会感谢你的帮助。

谢谢Harold

好吧，看来你们解决了我的问题。我非常感谢你，我一定会调查jQuery！

尝试将onclick更改为此

<div id="pepper" onclick="changeState"></div>

document.getElementById('fluffy').style.display就是''。由于您使用样式表设置样式，因此必须使用getComputedStyle（加上跨浏览器兼容性的好友）。您可以在Get all computed style of a element的答案中找到一个跨浏览器实现的示例。

我知道，你正在努力学习JavaScript，这也是我想要鼓励的，但有了jQuery，整个东西将是一个友好的单行加跨行程序等。

<div id="fluffy"></div>
<div id="pepper"></div>

<script>仅包含：

$("#pepper").click(function () { $("#fluffy").toggle(); });

在JSFiddle上试用。

当页面第一次加载时，div没有任何内联样式。element.style仅读取内联样式。

您需要使用style="display:block;"渲染div，或者如果您不能/不想这样做，请查看支持的浏览器的getComputedStyle选项

使用计算样式：

<div id="fluffy"></div>
<div id="pepper" onclick="changeState()"></div>
<script type="text/javascript">
function changeState() {
    var fluffy = document.getElementById('fluffy');
    var divState = window.getComputedStyle(fluffy).display;
    if (divState == 'block') {
       fluffy.style.display = 'none';
    }
    else if (divState == 'none') {
       fluffy.style.display = 'block';
    } else {
       alert('test error message');
    }
}
</script>

jsFiddle

相关文章：