title: Countdown JavaScript, after ajax refresh, will get Cannot set property 'innerHTML' of null
body: <p>I am using a forum software from China called <code>Discuz!X</code>, it got own template engine.</p>
  
  <p>Now I am doing a plugin for the software, I use their <code>ajaxget</code> to refresh my certain <code>Div.id</code>.</p>
  
  <p>Below is the original forum code for <code>ajaxget</code> function:</p>
  
  <pre><code>function ajaxget(url, showid, waitid, loading, display, recall) {
       $F('_ajaxget', arguments, 'ajax');
  }
  </code></pre>
  
  <p>In my <code>.htm</code> file, my coding as below (explanation: this template engine allow I use <code>$_G[timestamp]</code> acting like php <code>timenow()</code>, so that mean <code>$_G[timestamp] = timenow();</code> <code>{TIMESTAMP} = timenow()</code> also):</p>
  
  <pre><code>&lt;div id="guestlist"&gt;&lt;span id="span_guest{$_G[timestamp]}"&gt;&lt;/span&gt;
  &lt;script&gt;
      var guest{$_G[timestamp]}=30;
      function showtimeguest{$_G[timestamp]}(){
          guest{$_G[timestamp]}--;
          document.getElementById('span_guest{$_G[timestamp]}').innerHTML="Next customers will reach on "+Math.floor(guest{$_G[timestamp]}/60)+"minutes"+guest{$_G[timestamp]}%60+"second";
          if(guest{$_G[timestamp]}&lt;=0){
              ajaxget('plugin.php?id=jnshopheroes&amp;ajax=renewguesttime&amp;timestamp={TIMESTAMP}','guestlist');
              ajaxget('plugin.php?id=jnshopheroes&amp;ajax=renewguest&amp;timestamp={TIMESTAMP}&amp;formhash={FORMHASH}','selllist'); 
          }
          setTimeout("showtimeguest{$_G[timestamp]}()",1000);
      }
      setTimeout("showtimeguest{$_G[timestamp]}()",1000);
  &lt;/script&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Based on my coding, when <code>guest{$_G[timestamp]}</code> countdown until <code>0</code>, the <code>ajaxget</code> will refresh my 2 div id <code>guestlist</code> AND <code>selllist</code> as well, but  my chrome browser console will show </p>
  
  <pre><code>TypeError: Cannot set property 'innerHTML' of null
  at showtimeguest1502438999 (&lt;anonymous&gt;:5:58)
  at &lt;anonymous&gt;:1:1
  </code></pre>
  
  <p>I think maybe when I refresh the guest list, the previous java script for countdown has been disappear, so can't caught the <code>showtimeguest1502438999</code></p>
  
  <p>I also tried the below code, but doesn't working.</p>
  
  <pre><code>&lt;span id="span_guest{$_G[timestamp]}"&gt;&lt;/span&gt;
  &lt;script&gt;
      var guest{$_G[timestamp]}=30;
      function showtimeguest{$_G[timestamp]}(){
          guest{$_G[timestamp]}--;
          document.getElementById('span_guest{$_G[timestamp]}').innerHTML="Next customers will reach on "+Math.floor(guest{$_G[timestamp]}/60)+"minutes"+guest{$_G[timestamp]}%60+"second";
          if(guest{$_G[timestamp]}&lt;=0){
              ajaxget('plugin.php?id=jnshopheroes&amp;ajax=renewguesttime&amp;timestamp={TIMESTAMP}','guestlist');
              ajaxget('plugin.php?id=jnshopheroes&amp;ajax=renewguest&amp;timestamp={TIMESTAMP}&amp;formhash={FORMHASH}','selllist'); 
              clearTimeout(showtimeguest{$_G[timestamp]}); //add here
              clearTimeout(showtimeguest{$_G[timestamp]}()); //add here
          }
          setTimeout("showtimeguest{$_G[timestamp]}()",1000);
      }
      setTimeout("showtimeguest{$_G[timestamp]}()",1000);
  &lt;/script&gt;
  </code></pre>
  
  <p>How to improve my coding as well? Thank you.</p>