Question

我该如何解决 .length 未定义问题？

2020-05-23

884

javascript

我在这里第 2 行收到 .length 错误。

index.js:10 Uncaught TypeError: Cannot read property 'length' of undefined"

代码：

<div class="formCustomerName">
         <label>Name:</label>
         <input type="text" id="customerName" placeholder="Name" value="" 
required>
</div>



let name = document.getElementById('customerName').value;

form.addEventListener('input', pushData, false);{
    if (name.value.length >= 0) {
        btn.setAttribute('disabled', 'disabled')
        document.getElementById('submitInput').innerHTML = ("Hello If statment here!")

    } else {
        document.getElementById('submitInput').innerHTML = ("Hello Else statment here!")
        btn.removeAttribute('disabled');
    }



function pushData() {

Answer 1

您将 customerName 的 value 存储到 name 。

然后，您尝试访问 name.value.length ，其本质上是

document.getElementById('customerName').value.value.length

由于 value 属性没有其他 value 属性，因此它返回 undefined ，从而导致错误。

要解决此问题，请从 name 的定义中删除 .value ：

let btn = document.getElementById('submitButton');
let form = document.getElementById('form');
let name = document.getElementById('customerName');

form.addEventListener('input', pushData, false); 

function pushData(){
  if (name.value.length >= 0) {
    btn.setAttribute('disabled', 'disabled')
    document.getElementById('submitInput').innerHTML = ("Hello If statment here!")

  } else {
    document.getElementById('submitInput').innerHTML = ("Hello Else statment here!")
    btn.removeAttribute('disabled');
  }
}

<form id="form">
  <div class="formCustomerName">
    <label>Name:</label>
    <input type="text" id="customerName" placeholder="Name" value="" required>
    <button id="submitButton">Submit</button>
    <div id="submitInput"></div>
  </div>
</form>

Answer 2

您有：

let name = document.getElementById('customerName').value;

因此，名称是 ID 为 customerName 的元素的值。

name.value.length >= 0

表示 element.value.value.length 。您应该在条件下得到以下内容：

name.length >= 0