javascript - 解决错误: Cannot read property 'style' of null"with a better approach?

Question

我有一个共同点js文件2个不同的页面。在第 1 页中，我只想显示 text2字段时LName输入具有任意值。否则，我希望将其隐藏。所以我创建了一个if条件来查看 LName 是否有任何值输入，如果没有值，我保留 display: none; .

在第 2 页中，我不需要 id="text2" 的 div ，所以放弃了。因此，每当我给出输入时，它都会返回错误，因为没有带有 id="text2" 的 div .

我需要一个js文件，同时，我需要显示text2 div 在第 1 页，但我不想保留 <div id="text2" class="display: none;"></div>在第 2 页中，因为我在那里不需要它。我怎么解决这个问题？我可以采取更好的方法吗？

这是 jsfiddle 中的工作页面 1 .

这是代码片段中的第 2 页，它返回一个错误:

$(document).ready(function() {
  $(document).on("keyup change", "#FName, #LName", function() {
    var FName = $('#FName').val();
    var LName = $('#LName').val();

    var listP = document.getElementById('list');
    if ($('#FName').val() == "") {
      listP.style.display = 'none';
    } else {
      listP.style.display = 'block';
    }

    var text2P = document.getElementById('text2');
    if ($('#LName').val() == "") {
      text2P.style.display = 'none';
    } else {
      text2P.style.display = 'block';
    }

    $('#text1').html('<li>This is text 1</li>');
    $('#text2').html('<li>This is text 2</li>');
    $('#text3').html('<li>This is text 3</li>');

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
FName: <input name="FName" id="FName"><br> LName: <input name="LName" id="LName"><br>
<div id="list">
  <div id="text1"></div>
  <div id="text3"></div>
</div>

Answer 1

检查text2P是否不为假:

var text2P = document.getElementById('text2');
if (text2P) {
    if ($('#LName').val() == "") {
        text2P.style.display = 'none';
    } else {
        text2P.style.display = 'block';
    }
}

文档

MDN web docs: Falsy