Simple Javascript if statement problem
Question
I'm sure the solution is glaringly obvious, but I've spent an hour faffing about so would really appreciate any help!
The following javascript is meant to make a div visiable and another div invisible if the variable loggedin="true":
/* Javascript */
function showArticle()
{
document.getElementById('full').style.display = 'block';
document.getElementById('summary').style.display = 'none';
}
var loggedin="true";
var owned="true";
if (loggedin="true")
{
document.write("Logged In");
}
if (owned="true")
{
showArticle();
}
.
<!-- HTML -->
<div id="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div id="full" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.
<div>
Am I right in thinking the issue is with my calling of the showArticle function?
7 answers
solution1
8 2011-01-25 08:31:12
change = to == , look on this article (javascript operator)
if (loggedin=="true")
.....
if (owned=="true")
solution2
3 2011-01-25 08:33:23
应该是if (a == b) ，而不应该是if (a == b) if (a = b) ：后者将b的值分配给变量a （然后使用b的值确定是否运行if条件，在您的示例中总是这样）。
solution3
2 2011-01-25 08:57:50
function showArticle()
{
document.getElementById('full').style.display = 'block';
document.getElementById('summary').style.display = 'none';
}
var loggedin = true;
var owned = true;
if (loggedin == true)
{
alert("Logged In");
}
if (owned == true)
{
showArticle();
}
solution4
2 ACCPTED 2011-01-25 10:01:13
I copied your code into a text file and tried it - and it had the problem.
I put the javascript in script tags above the html.
<html>
<body>
<script>
function showArticle()
{
document.getElementById('full').style.display = 'block';
document.getElementById('summary').style.display = 'none';
}
var loggedin="true";
var owned="true";
if (loggedin="true")
{
document.write("Logged In");
}
if (owned="true")
{
showArticle();
}
</script>
<!-- HTML -->
<div id="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div id="full" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.
<div>
</body>
</html>
This fails because when the javascript runs the div tags have not been added to the DOM, so the getElementById returns null. I found this by using debugging the javascript in Firebug / Firefox.
If I moved the javascript to after the html, it works - as the DOM is then loaded with those items.
<html>
<body>
<!-- HTML -->
<div id="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div id="full" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.
<div>
<script>
function showArticle()
{
document.getElementById('full').style.display = 'block';
document.getElementById('summary').style.display = 'none';
}
var loggedin="true";
var owned="true";
if (loggedin="true")
{
document.write("Logged In");
}
if (owned="true")
{
showArticle();
}
</script>
</body>
</html>
solution5
2 2011-01-25 10:11:59
Worked for me ( UPD ):
<html>
<head>
<script type="text/javascript">
window.onload = function() {
function showArticle()
{
document.getElementById('full').style.display = 'block';
document.getElementById('summary').style.display = 'none';
}
var loggedin = true, owned = true;
if (loggedin == true)
{
document.write("Logged In");
}
if (owned == true)
{
showArticle();
}
}
</script>
</head>
<body>
<!-- HTML -->
<div id="summary">moo</div>
<div id="full" style="display:none;">foo</div>
</body>
</html>
So, what was wrong?
- unclosed
<div>(the second one) - appropriation instead of comparsion (
=instead of==) - strings instead of booleans (
"true"vstrue) - script had no type (you should always set it. it is just a standard:
<script type="text/javascript">) - scripts should be within
<head>tag (it is also a standard) - you were trying to access objects when they were not loaded yet
solution6
0 2011-01-25 08:37:40
而不是loginin =“ true”，写为loginin ==“ true”
solution7
0 2011-01-25 08:53:40
its really novice to hide content with javascript. But if you want to do it anyways, I would recommend erasing the content.
use
document.getElementById('summary').innerHTML = '';
instead of
document.getElementById('summary').style.display = 'none';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.