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" vs true)
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';

Simple Javascript if statement problem

精彩评论

关注公众号

热门标签

图文推荐

Simple Javascript if statement problem

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：