javascript - 我可以通过从 PHP 获取变量来更改 Javascript 中的显示属性吗？

Question

我一直在尝试通过从 PHP 获取变量来更改 Javascript 中的显示属性。我可以使用 Ajax 将变量发送到 PHP，但我不能这样做，反之亦然。基本上，我正在使用 PHP 制作一个登录页面，此登录表单位于我的索引页面中。所以每次我登录时，登录表单仍然存在。我不想要它。是否有可能(不知何故，应该是这样，因为我知道一些网站已经这样做了)隐藏该登录表单并显示任何用户相关信息(例如用户的个人资料图片)？这是我到目前为止所做的；

.tablelogin{
	 background: #044559;
  background: -webkit-linear-gradient(342deg, #08384B, #03617C);
  background: -o-linear-gradient(342deg, #08384B, #03617C);
  background: linear-gradient(72deg, #08384B, #03617C);
	border-top-left-radius: 11%;
	border-top-right-radius: 11%;
	border-bottom-left-radius: 5%;
	border-bottom-right-radius: 5%;
	display: none;
}

.loginbuttons{
	border-radius: 39%;
	border-bottom-color: rgba(17,101,255);
	color: rgba(0,0,64);
	background-size: 255px;
	box-shadow:20px 30px 50px 5px,rgba(9,54,64);
	border-top-color: rgba(14,77,191);
	background-image: radial-gradient(rgba(5,25,64),rgba(11,52,129), rgba(16,91,235));
	width: 55px;
	font-size: 11px;
}
.loginbuttons:hover{
	border-top-color: rgba(17,101,255);
	border-bottom-color: rgba(14,77,191);
}
.loginbuttons:active{
	border-left-color: rgba(5,45,64);
	border-right-color: rgba(5,83,127);
}
.textboxes{
	height: 11px;
	width: 55px;
	background-color: rgba(20,127,120);
	border-radius:11%;
	font-size: 11px;
	color: rgba(0,0,64);
}
.textboxes:focus{
	border-radius: 5%;
	width: 91px;
	height: 16px;
	box-shadow: rgba(5,11,91);
}
.textboxes:active{
	border-radius: 5%;
	width: 59px;
}
::placeholder{
	color:  rgba(5,5,91);
}

<form  method="post" action="loginRegister.php">
		<table class="tablelogin" id="loginTables" name="loginTable">
			<tr style="display: inline">
				<td>
				<input type="text" placeholder="Username" class="textboxes" name="username">
				</td>
				<td>
					<input type="text" placeholder="Password" class="textboxes" name="password">
				</td>
			</tr>
			<tr style="display: block">
				<td>
					<input type="radio" name="logins" value="signIn"   onClick="SignIn()" placeholder="Sign in"><label style="font-size: 11px; color: #1295D5">Login</label>
				
				</td>
				<td>
					<input type="radio" name="logins" value="register" onClick="Register()"><label style="font-size: 11px; color: #1295D5">Register</label>
				</td>
			</tr>
			<tr id="values" style="display: none;">
				<td>
					<input type="text" placeholder="Name" class="textboxes">
				</td>
				<td>
					<input type="text" placeholder="E-mail" class="textboxes">
				</td>
			</tr>
			<tr id="values2" style="display: none;">
				<td>
					<input type="text" placeholder="Country" class="textboxes">
				</td>
				<td>
					<input type="text" placeholder="Birth-Date" class="textboxes">
				</td>
			</tr>
			<tr>
				<td style="display: inline-block;">
					<input type="submit" value="Login" class="loginbuttons" id="submits" name="submits" onClick="login()">
					<input type="button" value="0" style="display: none;" name="logins" id="logins">
				</td>
				<td style="display: inline-block; margin-left: 9.12%">
					<input type="reset" value="Cancel" class="loginbuttons">
				</td>
			</tr>
		</table>
	</form>

 <!-- php codes inside my index file -->
<?php
        session_start();
        include("connection.php");



        $sql = "SELECT userState FROM users WHERE userID = '$_SESSION[userID]'";
        $result = mysqli_query($db,$sql);
        $userState=0;
        $row = mysqli_fetch_assoc($result);
        if($result)
        {
            $userState=$row["userState"]; //gets the login state. It is set to 0 when user logouts
        }
        if($userState==1) // if login state is 1 then it means user is logged in. So it must hide login form and display user related informations
        {
            echo "<script> window.alert('sfyhsjj');</script>"; //prints that random text
            echo ' <script> document.getElementById("logoupper").style.display="none";</script>' // It doesnt hide that
            echo "<script> window.alert('sfyhsjj');</script>"; // prints that random text

        }
    ?>//End of the code

Answer 1

您的脚本没有隐藏元素，因为登录表单没有 id="logoupper"。

保留现有的内容，将

包裹在:

 <div id="loginform">
    <form  method="post" action="loginRegister.php">
    ... 
    </form>
 </div>

然后改变

echo ' <script> document.getElementById("logoupper").style.display="none";</script>'; // It doesnt hide that

至

echo ' <script> document.getElementById("loginform").style.display="none";</script>';

这应该可以解决问题。