Simple Javascript if statement problem
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 showArt开发者_StackOverflowicle function?
change = to == , look on this article (javascript operator)
if (loggedin=="true")
.....
if (owned=="true")
It should be if (a == b) and not if (a = b) : the latter assigns the value of b to variable a (and then uses the value of b to determine whether to run the if condition, which in your example is always the case).
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>
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
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();
}
instead of loggedin="true" write as loggedin =="true"
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';
加载中,请稍侯......
精彩评论