title: JavaScript Can't Find Elements from New HTML Document
body: <p>The changing innerHTML of id totalNumber is executing before the html file is changed. How do I fix this?</p>
  
  <pre><code>function startPayment() {
    let accounts = document.getElementById('#accountNumber').value;
    let total = document.getElementById('#total').innerHTML;
    if (accounts &gt;= 20) {
      document.location.href = "payment.html";
      document.getElementById('#totalNumber').innerHTML = total;
    } else {
      alert("Minimum Accounts Not Met");
    }
  }
  </code></pre>
  
  <p>Here is the HTML of the newly loaded file</p>
  
  <pre><code>&lt;div class="paymentForm"&gt;
    &lt;h1 class="payment"&gt;Payment&lt;/h1&gt;
    &lt;h2 class="totalFinal"&gt;Total: $ &lt;span id="#totalNumber" class="totalNumber"&gt;0&lt;/span&gt;&lt;/h2&gt;
    &lt;input id="#nameOnCard" class="cardInput" placeholder="Name on Card"&gt;&lt;/input&gt;
    &lt;input id="#cardNumber" class="cardInput" placeholder="Card Number"&gt;&lt;/input&gt;
    &lt;input id="#cardExpiration" class="cardInput" placeholder="Card Expiration (MM/YY)"&gt;&lt;/input&gt;
    &lt;input id="#CVN" class="cardInput" placeholder="Card Verification Number"&gt;&lt;/input&gt;
    &lt;div id="#backBtn" class="backBtn"&gt;Back&lt;/div&gt;
    &lt;div id="#submitBtn" class="submitBtn"&gt;Submit&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>