浏览器将 JavaScript 视为文本答案

【问题标题】：browser treating JavaScript as text浏览器将 JavaScript 视为文本
【发布时间】：2023-03-08 12:26:01
【问题描述】：

我正在尝试制作登录/注册表单。 onclick 事件不起作用。

未捕获的类型错误：无法读取 null 的属性“样式” 登录时 (2.html:47) 在 HTMLSpanElement.onclick (2.html:16)

我该如何解决？正如我假设 JS 中的样式属性有问题：

       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,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);}

【问题讨论】：

请阅读How to ask a good question，特别注意上面写着“使用堆栈片段制作内联 JavaScript / HTML / CSS 的现场演示”。和“包括任何错误消息”。你打了一个 typo 并弄错了元素的 ID。
您的问题标题与您的问题有何关联？ “浏览器将 JavaScript 视为文本” 到底是什么意思？
当我在浏览器中打开它并打开开发选项时，它显示而不是视为事件
未捕获的类型错误：在 HTMLSpanElement.onclick (2.html:16) 上登录 (2.html:47) 时无法读取 null 的属性“样式”
没有id为regForm的元素。 有一个元素，其 id 为 regiterForm。

标签： javascript html events properties

【解决方案1】：

我猜你应该检查控制台是否有错误..

或者如果有任何类似的错误，请将defer 属性添加到您的脚本标签。 Defer 属性仅在 HTML 加载后才会运行 JavaScript。

【讨论】：

哦，就像在 cmets 中一样，你搞砸了 id .. 但是如果问题仍然存在，请在脚本标签中使用 defer 属性