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

Question

我在第2行出现.length错误。

index.js：10未捕获的TypeError：无法读取未定义的属性'length'”

代码：

<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，因此返回错误。

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

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