title: What is the best call DOM control javascript function in each example.html file(example.blade.php) or common.js?
body: <p>For Example, in one project, there are many example*.html(example*.blade.php)</p>
  <ul>
  <li>common.js</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>var common = {
      movingTest : function(){
          document.getElementById(&quot;test&quot;).addEventListener('click',
          function(){
             //something to move Test
          }
          );
      }
  } 
  
  </code></pre>
  <ol>
  <li>case 1. call in each file.</li>
  </ol>
  <p>(FOR EXAMPLE, example1, example3, example5 have id=&quot;test&quot; but not example2, example4, example6)</p>
  <ul>
  <li>example1.html(example1.blade.php)</li>
  </ul>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
  // This id=&quot;test&quot; is not included in every example*.html(example*.blade.php)
  &lt;div id=&quot;test&quot;&gt;&lt;/div&gt;
  &lt;script src=&quot;common.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
      common.movingTest();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <ol start="2">
  <li>case 2. call in common.js</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>var common = {
      movingTest : function(){
          document.getElementById(&quot;test&quot;).addEventListener('click',
          function(){
             //something to move Test
          }
          );
      },
  } 
  
  // there are not every test in .html file, i wrote &quot;if&quot;
  if(document.getElementById(&quot;test&quot;).length !== 0){
      common.movingTest();
  }
  
  </code></pre>
  <p>what is the be practice?
  or can i detect what is the best through any other tools?</p>
  <p>Thank you.</p>