javascript - Jquery 未捕获类型错误 : Cannot read property 'value' of null

Question

下面的表单使用 Google Autocomplete API，它接受输入“自动完成”并将其更改为第二种形式的单独项目(除非用户点击“找不到地址？”，否则它是隐藏的。这一切都很好，但是我正在使用 JQuery 来验证每个字段中是否都有数据(通过将背景更改为绿色)，这不能正常工作。当我单独输入每个字段并使它们变为绿色时它起作用，但自动完成输入或个人发生这种情况时，输入变为绿色。HTML

<div id="locationField">
    <input id="autocomplete" placeholder="Begin typing an address"
               onFocus="geolocate()" type="text" class="form-control"/>
    <sup><a id="newClientAddressFormLink">Can't find an address?</a></sup>
</div>

<div id="newClientAddressForm" style="display:none;">
    <div id="address">
        <div>
            <input type="text" data-street-number-id="0" class="form-control" id="street_number" maxlength="10" placeholder="Number*" />
            <div id="StreetNumberValidation" class="alert alert-danger complaint-validation" role="alert" style="display: none; max-width: 280px;"><strong>Number</strong> required!</div>
        </div>
        <div>
            <input type="text" data-street-name-id="0" class="form-control" id="route" maxlength="50" placeholder="Street*" />
            <div id="StreetNameValidation" class="alert alert-danger complaint-validation" role="alert" style="display: none; max-width: 280px;"><strong>Street</strong> required!</div>
        </div>
   </div>
</div>

JQuery

$(function () {
    $(document).on('change keyup blur input', "#autocomplete", function () {
        if (this.value.length > 25)
        {
            checkStreetNumberLength(document.getElementById("#street_number"));
            checkStreetNameLength(document.getElementById("#route"));
            $("#autocomplete").css("background-color", "#dff0d8");
        }    
    });
    // Street Number (ID is from Google Autocomplete API)
    $(document).on('change keyup blur input', "#street_number", function () {
        checkStreetNumberLength(this);
    });
    // Street Name (ID is from Google Autocomplete API)
    $(document).on('change keyup blur input', "#route", function () {
        checkStreetNameLength(this);
    });
});

var checkStreetNumberLength = function (fn) {
    if (fn.value.length < 1) {
        $("#street_number").css("background-color", "#fff");
    }
    else {
        $("#street_number").css("background-color", "#dff0d8");
    }
}
var checkStreetNameLength = function (fn) {
    if (fn.value.length < 5) {
        $("#route").css("background-color", "#fff");
    }
    else {
        $("#route").css("background-color", "#dff0d8");
    }
}

它返回一个 Uncaught TypeError: Cannot read property 'value' of null if (fn.value.length < 1) 上的错误和 if (fn.value.length < 5) .

有什么想法吗？

Answer 1

混合使用 DOM 和 jQuery 不是一个好主意，尤其是当您混合使用选择器时。

document.getElementById("#street_number") 

不应该像 jQuery 或 querySelector 那样有#。而是使用 jQuery 并传递 jQuery 对象:

checkStreetNumberLength($("#street_number"));
checkStreetNameLength($("#route"));

然后当你通过时，使用通过的:

var checkStreetNumberLength = function ($obj) { // jQuery object passed
  $obj.css("background-color", $obj.val().length < 1?"#fff":"#dff0d8");
}

var checkStreetNameLength = function ($obj) {
  $obj.css("background-color", $obj.val().length < 5?"#fff":"#dff0d8");
}

您也可以只触发一个事件并删除一些代码:

$(function() {
  $(document).on('change keyup blur input', "#autocomplete", function() {
    if (this.value.length > 25) {
      $("#street_number").change(); // trigger change
      $("#route").change();
      $("#autocomplete").css("background-color", "#dff0d8");
    }
  });
  // Street Number (ID is from Google Autocomplete API)
  $(document).on('change keyup blur input', "#street_number", function() {
    $(this).css("background-color", $(this).val().length < 1?"#fff":"#dff0d8");
  });
  // Street Name (ID is from Google Autocomplete API)
  $(document).on('change keyup blur input', "#route", function() {
    $(this).css("background-color", $(this).val().length < 5?"#fff":"#dff0d8");
  });
});