Javascript：焦点不是函数

Question

我正在写一份注册表并尝试进行一些验证。当我的验证按钮位于内部时，我遇到了同样的问题，<form>但是为了解决这个问题，我只是将其移出，因为我猜测该按钮导致表单刷新。然而现在在“ValidateForm()”函数中插入多个 if 语句后，此错误消息似乎又回来了。

错误：未捕获 TypeError：Forename.focus 不是
ValidateForm（登录表单 Complex.html？Forename=&Surname=&Username=&Password=&Email=:79）处的函数
，位于 HTMLButtonElement.onclick（登录表单 Complex.html?Forename=&Surname=&Username） =&密码=&电子邮件=:63)**

function ValidateForm() {
  var Forename = document.getElementById("Forename").value;
  var Surname = document.getElementById("Surname").value;
  var Username = document.getElementById("Username").value;
  var Password = document.getElementById("Password").value;
  var Email = document.getElementById("Email").value;
  var Errors = 0

  if (Forename == "") {
    document.LoginForm.Forename.focus();
    Forename.focus();
    Errors = Errors + 1
  }

  if (Surname == "") {
    document.LoginForm.Forename.focus();
    Surname.focus();
    Errors = Errors + 1

  }

  if (Username == "") {
    document.LoginForm.Forename.focus();
    Username.focus();
    Errors = Errors + 1

  }

  if (Password == "") {
    document.LoginForm.Forename.focus();
    Password.focus();
    Errors = Errors + 1

  }
  if (Errors != 0) {
    alert("Please fill in the highlighted boxes")
    return false;
  }
}

body {
  margin: 0;
  padding: 0;
  background: url(LoginBack.jpg);
  background-size: cover;
  background-position: center;
  font-family: century gothic;
}

.loginbox {
  width: 420px;
  height: 680px;
  background: #5CDB95;
  color: #05386B;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  padding: 70px 30px;
  border-radius: 30px;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  top: -75px;
  left: calc(50% - 75px);
}

h1 {
  margin: 0px;
  padding: 0 0 20px;
  text-align: center;
  font-size: 40px;
}

.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}

.loginbox input[type="text"],
input[type="password"],
input[type="email"] {
  border: none;
  border-bottom: 1px solid #05386B;
  background: transparent;
  outline: none;
  height: 40px;
  font-size: 20px;
  color: #379683;
}

.loginbox button[type="Submit"] {
  border: 2px solid #05386B;
  background: #379683;
  height: 40px;
  width: 362px;
  font-size: 20px;
  color: ;
  border-radius: 20px;
}

.loginbox button[type="submit"]:hover {
  cursor: pointer;
  background: #8EE4AF;
}

.loginbox a {
  text-decoration: none;
  font-size: 15px;
  line-height: 20px;
  color: #379683;
}

.loginbox a:hover {
  cursor: pointer;
  color: #8EE4AF;
}

.loginbox input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  border: none;
  border-bottom: 1px solid #8B0000;
  background: transparent;
  outline: none;
  height: 40px;
  font-size: 20px;
  color: #8B0000;
}

<div class="loginbox">
  <img src="Logo.jpg" class="avatar">
  <h1> Create Account </h1>
  <form name="LoginForm">
    <p>Forename<p><input type="text" name="Forename" id="Forename" placeholder="Enter Forename here">
    <p>Surname<p><input type="text" name="Surname" id="Surname" placeholder="Enter Surname here">
    <p>Username<p><input type="text" name="Username" id="Username" placeholder="Enter Username here">
    <p>Password<p><input type="password" name="Password" id="Password" placeholder="Enter Password here">
    <p>Email<p><input type="email" name="Email" id="Email" placeholder="Enter Email here">
    <!-- 
    <p>Gender<p><input type="radio" id="Male" name="Gender" value="Male">Male</input>
                <input type="radio" id="Female" name="Gender" value="Female">Female</input>
    -->
    <button onclick="ButtonSubmit()" type="Submit" value="True" name="ButtonSubmit"> Submit </button><br /><br />
    <a href="#"> Forgot your password? </a><br />
    <a href="#"> Already got an account? </a><br /><br />
  </form>
  <button onclick="ValidateForm()"> Validate </button>
</div>

Answer 1

您的Forename变量没有保存对 DOM 元素的引用。它引用.value该元素的 。对于所有其他 DOM 变量也是如此。

var Forename = document.getElementById("Forename").value;

没有value方法.focus()。该元素确实如此。

一般来说，最好不要将变量设置为 DOM 元素的属性，因为如果您稍后确定需要不同的 DOM 属性，则必须再次扫描 DOM 以获取已扫描的引用。此外，将变量设置为 DOM 元素本身，而不是元素的属性，可以防止出现错误，这种情况很常见。

因此，将变量设置如下所示：

var Forename = document.getElementById("Forename");

然后，当您需要该值时，您可以编写：

Forename.value

并且，当您想使用该focus()方法时，只需编写：

Forename.focus();

如果您始终从元素本身开始，则可以访问元素的任何方面。