OnClick change JavaScript file

Question

I have an index.html file with two buttons as:

<a class="btn btn-primary" href="pages/page1.html" target="_blank">Load init-a.js file</a>

<a class="btn btn-primary" href="pages/page1.html" target="_blank">Load init-b.js file</a>

If I click on button 1, page1.html and page2.html files should Load init-a.js file until I came back to index.html page and click on other option.

If I click on button 2,

<script src="../js/init-a.js"></script>

The above tag should be changed as below...

<script src="../js/init-b.js"></script>

in page1.html and page2.html files

PS: By default I am loading init-a.js file in all the html pages

Online Demo

I have many clients such as Lenovo, Philips, Samsung... and I want to maintain only one set of prototype (more than 100 html pages)..

Eg, If I want to give a demo for lenovo, By clicking / selecting Lenovo option, I will just load lenovo.js file to get the lenovo related data, for philips demo philips.js file... relevant content will be loaded in all html pages which will be easy for maintanance, instead of creating different folders for each client

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Index</title>
        <link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="styles/master.css">
    </head>
    <body>
        <div class="text-center">
            <div class="container">
                <a class="btn btn-primary" href="pages/page1.html" target="_blank">Load init-a.js file</a>
            </div>
            <div class="container">
                <a class="btn btn-primary" href="pages/page1.html" target="_blank">Load init-b.js file</a>
            </div>
        </div>

        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

init-a.js

$("h1.init-heading").html("Heading from <span>init-a.js</span> file");
$("p.init-paragraph").html("Paragraph from <span>init-a.js</span> file");
$("ul.init-list").replaceWith("<ul><li>Item 1 from from <span>init-a.js</span> file</li><li>Item 2 from from <span>init-a.js</span> file</li><li>Item 3 from from <span>init-a.js</span> file</li></ul>");

init-b.js

$("h1.init-heading").html("Heading from <span>init-b.js</span> file");
$("p.init-paragraph").html("Paragraph from <span>init-b.js</span> file");
$("ul.init-list").replaceWith("<ul><li>Item 1 from from <span>init-b.js</span> file</li><li>Item 2 from from <span>init-b.js</span> file</li><li>Item 3 from from <span>init-b.js</span> file</li></ul>");

page1.html

<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/master.css">
</head>

<body>

    <a href="page2.html" class="btn btn-secondary btn-sm">>> Go to Page 2</a>

    <h1 class="init-heading">{Main Heading}</h1>
    <p class="init-paragraph">{Paragraph}</p>
    <ul class="init-list">
        <li>{Dummy item 1}</li>
        <li>{Dummy item 2}</li>
        <li>{Dummy item 3}</li>
    </ul>

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/init-a.js"></script>

</body>
</html>

It is always loading the init.a.js file :(... If I click on button 2, page1 and page2 should load init-b.js file, instead of init-a.js file — Reddy, Jan 28 '16 at 08:08
Are you trying to create some form of single page app where `page1/2.html` are partials? otherwise your just moving to those pages on button click and can include your scripts on them as normal. — ste2425, Jan 28 '16 at 08:09
**@ste2425**.. no, these are simple html pages for prototype purpose to show it to the client — Reddy, Jan 28 '16 at 08:10
I believe that you should approach your problem differently. Load both files and execute a different behavior based on the button clicked — Raulucco, Jan 28 '16 at 08:17
@hvnis... added the page1.html to the question... also please find the all files at **http://www.pixelfoxy.com/hello/index.html** — Reddy, Jan 28 '16 at 08:18
You only import init-a.js script, it's a cause of this problem. I think, you should use path parameter Ex: page1.html?btn=1. if (btn =1) { import script a} else {import script b}. This is my sugguestion — hvnis, Jan 28 '16 at 08:23

score 1 · Accepted Answer · edited May 23 '17 at 11:45

As for as I am understanding your question, You want to load JavaScript file dynamically. Here are some ways to load js file dynamically. You can use either of them.

function loadjscssfile(filename){
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", filename)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file

You can trigger this function in onclick event of your link.button.

The jQuery library also provides loading functionality in one line:

$.getScript("my_lovely_script.js", function(){
     alert("Script loaded.");
});

Following two links can also help you.

Example: You have following link in your code. Give some id to this like this

<a class="btn btn-primary" href="pages/page1.html" id="some_id" target="_blank">Load init-a.js file</a>

Now in your main javascript file (Which is you are using in your whole project), add following onclick function

$("#some_id").click(function(){
     //call above function like this.
     loadjscssfile("myscript.js", "js");
});

should I need to add above script in index.html? or inside html pages? Please suggest me as I am **Innocent at Scripting** :) — Reddy, Jan 28 '16 at 08:21

score 1 · Answer 2 · answered Jan 28 '16 at 08:21

1

No idea why you would want to do that. I have a simpler solution. You could just simply include init-b.js in your html 2 since it's separate pages. I find it really weird to use buttons to load javascript files to pages dynamically.

answered Jan 28 '16 at 08:21

Jiawei Tan

144
1
12

I have many clients and one generic html set of prototype... for example, If I want to give a demo for lenovo, I will just load lenovo.js file, for philips demo philips.js file... So that all relevant content will be loaded in all html pages which will be easy for maintanance... – Reddy Jan 28 '16 at 08:24

OnClick change JavaScript file

2 Answers2