我的JavaScript if ... else语句无法正常运行
[英]My JavaScript if…else statement isn't working properly
问题描述
So I'm fairly new to javascript, and I'm trying to use a simple if...else statement to toggle between showing and hiding a div element. 
因此，我对javascript还是相当陌生，并且尝试使用简单的if ... else语句在显示和隐藏div元素之间进行切换。 My HTML page looks like this: 我的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>
When I load the page in my browser, I receive an alert box containing 'test error message'. 在浏览器中加载页面时，我收到一个包含“测试错误消息”的警告框。 My original code had document.getElementById('fluffy').style.display stored in a variable called divState, but this didn't even give me an alert box, it didn't do anything. 我的原始代码将document.getElementById（'fluffy'）。style.display存储在名为divState的变量中，但这甚至没有给我一个警报框，它什么也没做。 I get the feeling I'm using == wrong or something, but I'm really not sure. 我感觉到我在使用==错误或其他错误，但是我不确定。 I've used ===, and when that didn't work I switched to ==, which is in the code above. 我用过===，当它不起作用时，我切换到了==，在上面的代码中。
If anyone knows what exactly I'm doing wrong, I would appreciate the help. 如果有人知道我到底在做什么错，我将不胜感激。
Thanks, Harold 谢谢，哈罗德
6 个解决方案
解决方案1
1
Alright, it looks like you guys fixed my problems. 好吧，看来你们解决了我的问题。 I can't thank you enough, and I will definitely look into jQuery! 非常感谢，我一定会研究jQuery！
解决方案2
0 2013-07-31 14:28:49
When the page first loads, the div doesn't have any inline styles. 首次加载页面时，div没有任何内联样式。 element.style reads inline styles only. element.style仅读取内联样式。
You will need to render the div with style="display:block;" 您将需要使用style="display:block;"来渲染div style="display:block;" or if you can't/don't want to do that, look into getComputedStyle options for your supported browsers 或者如果您不想/不想这样做，请查看支持的浏览器的getComputedStyle选项
解决方案3
0 2013-07-31 14:28:57
尝试将onclick更改为此
<div id="pepper" onclick="changeState"></div>
解决方案4
0 2013-07-31 14:29:06
document.getElementById('fluffy').style.display is '' . document.getElementById('fluffy').style.display是'' Since you're setting styles with a stylesheet, you'll have to use getComputedStyle (plus friends for cross-browser compatibility). 由于您是使用样式表设置样式，因此必须使用getComputedStyle （以及用于跨浏览器兼容性的朋友）。 You can find an example cross-browser implementation in the answer to Get all computed style of an element . 您可以在获取元素的所有计算样式的答案中找到跨浏览器的示例实现。
解决方案5
0 2013-07-31 14:33:35
Use computed style: 使用计算样式：
<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>
解决方案6
0 2013-07-31 14:35:24
I know, you're trying to learn JavaScript what I also want to encourage, but with jQuery , this whole stuff would be a one-liner plus crossbrowser-friendly etc. 我知道，您正在尝试学习JavaScript我也想鼓励的事情，但是使用jQuery时 ，整个过程将是一种单行代码以及跨浏览器友好的特性，等等。
<div id="fluffy"></div>
<div id="pepper"></div>
The <script> contains just: <script>仅包含：
$("#pepper").click(function () { $("#fluffy").toggle(); });
Try it out at JSFiddle. 在JSFiddle上尝试一下 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.