javascript - 为什么验证后输入值未定义？

Question

我有一个似乎无法解决的简单问题。我只是希望能够在输入您的姓名并单击提交后显示输入名称字段的值。然而，似乎出现了未定义的情况。

有人可以解释为什么会发生这种情况以及如何解决吗？代码如下:

var name = document.querySelector('#withJS input:first-of-type'),
    date = document.querySelector('#withJS input:not(:first-of-type)'),
    errorMsg = document.querySelector('#withJS .errorMsg');
  
  errorMsg.style.display='none';

  function validateForm() {
    alert(name.value);
    /*
    if(name.length == 0){
    errorMsg.style.display='block';
      errorMsg.textContent='Enter Name';
    }
    */
  }

#noJS, #withJS {
  background: lightgreen;
  max-width: 300px;
  padding: 10px;
  border: 5px solid #ccc;
}
#withJS {
  background: lightblue;
  margin-top: 10px;
}

.errorMsg {
  background: red;
  padding: 10px;
  margin-top: 10px;
  color: #fff;
  text-transform: uppercase;
}

<div id='withJS'>
<form>
Name:<br>
<input type="text">
  <br>
  Date:<br>
<input type="date">
  <br><br>
  <input type="submit" value="Submit" onclick='validateForm()'>
</form>
  <div class='errorMsg'>error message here</div>
</div>

感谢您的帮助。

Answer 1

您声明的全局变量name与window属性name冲突。更改该变量的名称，即:fname。

var fname = document.querySelector('#withJS input:first-of-type'),
    date = document.querySelector('#withJS input:not(:first-of-type)'),
    errorMsg = document.querySelector('#withJS .errorMsg');
  
  errorMsg.style.display='none';

  function validateForm() {
    alert(fname.value);
    /*
    if(name.length == 0){
    errorMsg.style.display='block';
      errorMsg.textContent='Enter Name';
    }
    */
  }

#noJS, #withJS {
  background: lightgreen;
  max-width: 300px;
  padding: 10px;
  border: 5px solid #ccc;
}
#withJS {
  background: lightblue;
  margin-top: 10px;
}

.errorMsg {
  background: red;
  padding: 10px;
  margin-top: 10px;
  color: #fff;
  text-transform: uppercase;
}

<div id='withJS'>
<form>
Name:<br>
<input type="text">
  <br>
  Date:<br>
<input type="date">
  <br><br>
  <input type="submit" value="Submit" onclick='validateForm()'>
</form>
  <div class='errorMsg'>error message here</div>
</div>