Javascript：焦点不是函数

Question

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

错误：未捕获的类型错误：Forename.focus 不是函数
在 ValidateForm (登录表单 Complex.html?Forename=&Surname=&Username=&Password=&Email=:79)
在 HTMLButtonElement.onclick (登录表单 Complex.html?Forename=&Surname=&Username=&Password=&Email=: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();

如果你总是从元素本身开始，你可以访问你想要的元素的任何方面。

Answer 2

例如Forename var 的值是 Forename 输入元素然后：

var Forename = document.getElementById("Forename"); //DOM element

var fornameValue = Forename.value //value

Forename.focus()  //focus function