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?
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?
Share Improve this question edited Jan 25, 2011 at 12:17 shybovycha 12.3k6 gold badges53 silver badges85 bronze badges asked Jan 25, 2011 at 8:30 JamieJamie 3691 gold badge6 silver badges22 bronze badges 3- 7 You are aware that anyone with minimal technical knowledge will be able to see the articlewithout being logged in? – Victor Nicollet Commented Jan 25, 2011 at 8:31
- 1 If this is JavaScript why was this tagged [php], [mysql], [project-planning] and [specifications]...? – BoltClock Commented Jan 25, 2011 at 8:32
- Victor, I am aware - this system is just a proof of concept / prototype that demonstrates functionality :) – Jamie Commented Jan 25, 2011 at 8:35
7 Answers
Reset to default 8change = 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 parsion (
=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 remend erasing the content.
use
document.getElementById('summary').innerHTML = '';
instead of
document.getElementById('summary').style.display = 'none';