title: Resolve the error: Cannot read property 'style' of null" with a better approach?
body: <p>I have a common <code>js</code> file for 2 different pages. In <strong>Page 1</strong>, I just want to show the <code>text2</code> field when the <code>LName</code> input has any value. Otherwise, I want it to be hidden. So I created an <code>if</code> condition to see whether there is any value for the <code>LName</code> input and if there is no value, I kept the <code>display: none;</code>.</p>
  
  <p>In <strong>Page 2</strong>, I don't need the div for <code>id="text2"</code>, so dropped it. As a result, whenever I give an input, it returns an error as there is no div with <code>id="text2"</code>.</p>
  
  <p>I need a single <code>js</code> file, at the same time, I need to show the <code>text2</code> div in Page 1 but I don't want to keep the <code>&lt;div id="text2" class="display: none;"&gt;&lt;/div&gt;</code> in the Page 2 as I don't need it there. How can I solve this problem? Is there any better approach I could take?</p>
  
  <p>This is the working Page 1 in <a href="https://jsfiddle.net/Ashonko/aq9Laaew/10099/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p>And this is the Page 2 in the snippet, that returns an error:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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('&lt;li&gt;This is text 1&lt;/li&gt;');
      $('#text2').html('&lt;li&gt;This is text 2&lt;/li&gt;');
      $('#text3').html('&lt;li&gt;This is text 3&lt;/li&gt;');
  
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  FName: &lt;input name="FName" id="FName"&gt;&lt;br&gt; LName: &lt;input name="LName" id="LName"&gt;&lt;br&gt;
  &lt;div id="list"&gt;
    &lt;div id="text1"&gt;&lt;/div&gt;
    &lt;div id="text3"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>