title: OnClick change JavaScript file
body: <p>I have an index.html file with two buttons as:</p>
  
  <pre><code>&lt;a class="btn btn-primary" href="pages/page1.html" target="_blank"&gt;Load init-a.js file&lt;/a&gt;
  
  &lt;a class="btn btn-primary" href="pages/page1.html" target="_blank"&gt;Load init-b.js file&lt;/a&gt;
  </code></pre>
  
  <p>If I click on <strong>button 1</strong>, <code>page1.html</code> and <code>page2.html</code> files should Load <code>init-a.js</code> file until I came back to index.html page and click on other option.</p>
  
  <p>If I click on <strong>button 2</strong>,</p>
  
  <pre><code>&lt;script src="../js/init-a.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The above tag should be changed as below...</p>
  
  <pre><code>&lt;script src="../js/init-b.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>in page1.html and page2.html files</p>
  
  <p><strong>PS</strong>: By default I am loading <code>init-a.js</code> file in all the html pages</p>
  
  <p><strong><a href="http://www.pixelfoxy.com/hello/index.html" rel="nofollow">Online Demo</a></strong></p>
  
  <blockquote>
    <p>I have many clients such as Lenovo, Philips, Samsung... and I want to maintain only one set of prototype (more than 100 html pages)..</p>
    
    <p><strong>Eg</strong>, If I want to give a demo for lenovo, By clicking / selecting Lenovo option, I will just load
    <code>lenovo.js</code> file to get the lenovo related data, for philips demo <code>philips.js</code> file... 
    relevant content will be loaded in all html pages which will be easy
    for maintanance, instead of creating different folders for each client </p>
  </blockquote>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Index&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="styles/master.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="text-center"&gt;
              &lt;div class="container"&gt;
                  &lt;a class="btn btn-primary" href="pages/page1.html" target="_blank"&gt;Load init-a.js file&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="container"&gt;
                  &lt;a class="btn btn-primary" href="pages/page1.html" target="_blank"&gt;Load init-b.js file&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>init-a.js</p>
  
  <pre><code>$("h1.init-heading").html("Heading from &lt;span&gt;init-a.js&lt;/span&gt; file");
  $("p.init-paragraph").html("Paragraph from &lt;span&gt;init-a.js&lt;/span&gt; file");
  $("ul.init-list").replaceWith("&lt;ul&gt;&lt;li&gt;Item 1 from from &lt;span&gt;init-a.js&lt;/span&gt; file&lt;/li&gt;&lt;li&gt;Item 2 from from &lt;span&gt;init-a.js&lt;/span&gt; file&lt;/li&gt;&lt;li&gt;Item 3 from from &lt;span&gt;init-a.js&lt;/span&gt; file&lt;/li&gt;&lt;/ul&gt;");
  </code></pre>
  
  <p>init-b.js</p>
  
  <pre><code>$("h1.init-heading").html("Heading from &lt;span&gt;init-b.js&lt;/span&gt; file");
  $("p.init-paragraph").html("Paragraph from &lt;span&gt;init-b.js&lt;/span&gt; file");
  $("ul.init-list").replaceWith("&lt;ul&gt;&lt;li&gt;Item 1 from from &lt;span&gt;init-b.js&lt;/span&gt; file&lt;/li&gt;&lt;li&gt;Item 2 from from &lt;span&gt;init-b.js&lt;/span&gt; file&lt;/li&gt;&lt;li&gt;Item 3 from from &lt;span&gt;init-b.js&lt;/span&gt; file&lt;/li&gt;&lt;/ul&gt;");
  </code></pre>
  
  <p><strong>page1.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Page 1&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="../styles/master.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;a href="page2.html" class="btn btn-secondary btn-sm"&gt;&gt;&gt; Go to Page 2&lt;/a&gt;
  
      &lt;h1 class="init-heading"&gt;{Main Heading}&lt;/h1&gt;
      &lt;p class="init-paragraph"&gt;{Paragraph}&lt;/p&gt;
      &lt;ul class="init-list"&gt;
          &lt;li&gt;{Dummy item 1}&lt;/li&gt;
          &lt;li&gt;{Dummy item 2}&lt;/li&gt;
          &lt;li&gt;{Dummy item 3}&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;script src="../js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="../js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="../js/init-a.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>