Unable to hide a HTML div using JavaScript

Question

I have a JSP with the following login form code:

<c:if test="${requestScope.loginFailed == true}">
    <script>
        show('login-failed');
    </script>
</c:if>
<c:if test="${sessionScope.userLoggedIn == true}">
    <script>
        show('welcome');
        hide('login-table');
    </script>
</c:if>

<div id="welcome" style="display: none;">
    <p style="color: green">Welcome ${sessionScope.user.userName}</p>
</div>

<div id="login-failed" style="display: none;">
    <p style="color: red">Invalid UserName/Password!</p>
</div>

<div id="login">
.........................
....actual login form....
.........................
</div>

In my JavaScript code I have written

function show(id) {
    document.getElementById(id).style.display = 'block';
}

function hide(id) {
    document.getElementById(id).style.display = 'none';
}

But, even when the user logs in and when the userLoggedIn attribute is found in the sessionScope and even if the <c:if> test succeeds, if am unable to hide the login div. Can anyone guide me?

Answer 1

The show and hide functions are being called before the elements that they affect.

You should either move the scripts to be after those elements (simpler), or defer their execution until the end of the page (slightly more complicated, but generally considered "more correct").

Answer 2

even if the test succeeds, if am unable to hide the login div.

The <c:if> is

<c:if test="${sessionScope.userLoggedIn == true}">
    <script>
        show('welcome');
        hide('login-table');
    </script>
</c:if>

and the div's id is login

<div id="login">

So, you probably need hide('login'); in the <c:if>1