Question

我有一个带有以下登录表单代码的JSP：

<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>

在我编写的JavaScript代码中

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

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

但是，即使用户登录并且在userLoggedIn中找到sessionScope属性，即使<c:if>测试成功，也无法隐藏{{1 div。谁能指导我？

Answer 1

show和hide函数在它们影响的元素之前被称为。

你应该将脚本移动到这些元素之后（更简单），或者将它们的执行推迟到页面结尾（稍微复杂一些，但通常认为“更正确”）。

Answer 2

即使测试成功，如果无法隐藏登录div。

<c:if>是

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

且div的ID为login

<div id="login">

因此，您可能需要hide('login');

中的<c:if>1

无法使用JavaScript隐藏HTML div

2 个答案: