浏览器将JavaScript视为文本

如何解决浏览器将JavaScript视为文本

我正在尝试填写登录/注册表格。 onclick事件无效。

未捕获的TypeError：无法读取null的属性“样式” 登录时（2.html：47）在HTMLSpanElement.onclick（2.html：16）

我该如何解决？我认为JS中的style属性有问题：

       regForm.style.transform = "translateX(400px)";

带有JavaScript的HTML：

<!DOCTYPE html>
<html>
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/styles/StyleSheet2.css" rel="stylesheet" />
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
</head>
<body>
<div class="account-page">
    <div class="container">
        <div class="col-md-12">
            <div class="form-container">
                <div class="form-btn">
                    <span onclick="login()">Login</span>
                    <span onclick="register()">Register</span>
                    <hr id="indicator"/>
                </div>
                <form id="loginForm">
                    <input type="text" placeholder="Username or Email" />
                    <input type="password" placeholder="Password" />
                    <input class="cb" type="checkBox" name="name" value="" />
                    <label>Remember me on this computer</label>
                    <a href="#">Forgot password</a>
                    <button type="submit" class="btn">Login</button>
                </form>
                <form id="regiterForm">
                    <input type="text" placeholder="Username or Email" />
                    <input type="password" placeholder="Password" />
                    <button type="submit" class="btn">Register</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var loginForm = document.getElementById("loginForm");
    var regForm = document.getElementById("regForm");
    var indicator = document.getElementById("indicator");

    function register() {
        regForm.style.transform = "translateX(0px)";
        loginForm.style.transform = "translateX(0px)";
 }
    function login() {
        regForm.style.transform = "translateX(400px)";
        loginForm.style.transform = "translateX(400px)";
 }
</script>
</body>
</html>

CSS：

.account-page{
padding:50px 0;
background:radial-gradient(#0094ff,#000000)}
.form-container{
background:#fff;
width:400px;
height:400px;
position:relative;
text-align:center;
padding:20px 0;
margin:auto;
text-shadow:0 0 20px 0px rgba(0,0.1);}
.form-container span{
font-weight:bold;
padding:0 10px;
color:#555;
width:100px;
display:inline-block;}
.form-btn{
display:inline-block;}
.form-container form {
max-width: 400px;
padding: 0 20px;
position: absolute;
top: 130px;}
form input{
width:100%;
height:30px;
margin:10px 0;
padding:0 10px;
border:1px solid #ccc;}
form .cb{width:auto;
height:100%;
padding:0;
float:left;}
form label{
float:left;
padding:0 0 0 5px;}
form a{float:left;}
form button{float:right;}
form .btn{
width:auto;
border:none;
cursor:pointer;}
form .btn:focus{
outline:none;}
#loginForm{
left:-400px;}
#registerForm{
left:0;}
#indicator{
width:100px;
border:none;
background:#ff523b;
height:3px;
margin-top:8px;
transform:translateX(50px);}

解决方法

我想您应该检查控制台中的错误。

或者，如果有类似的错误，请向脚本标签添加defer属性。延迟属性仅在HTML加载后才能运行JavaScript。