Replace and load another javascript file on button Click

Question

 

<div id="summary"><div id="container"></div>
  <div id="blocker"></div>
    <script type ="text/javascript" src="user.js"></script>   
</div>
  
<button type="button">Personal</button>
     <a href="#" onclick="f1(1);"<button type="button">Apps</button></a>
     <button type="button" >Settings</button>

I have this html file where i am loading a user.js file. But what I am trying to do is to replace that user.js file and load apps.js file whenever that Apps button is clicked and also load user.js file when personal button is clicked but for some reason i am not able to do that. This is the code I have written for that:

function f1(id)
 {
  $('#summary').html('  <script type ="text/javascript" src="apps.js">
   </script>');
 }

This didn't help? --> https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js — Mohammed Joraid, Aug 01 '17 at 11:53
Why? Loading data from the backend might be a good usecase for ajax — Jonas Wilms, Aug 01 '17 at 11:53
I can do that but the file I am loading is a three.js file and for now, i just want to replace it with another three.js file — Raghav Patnecha, Aug 01 '17 at 11:56
@MJoraid I checked the solution you referred me to but there it says typeof Object == something. But In my case both are buttons — Raghav Patnecha, Aug 01 '17 at 11:59
You don't need to use onclick if you are using jquery. And if you are using jquery, then you can use it to load the script. You need to reformat your code. That what I think you should do. Maybe I'm mistaken. So, you need to divide your issue into two. One, capture the event and trigger the script load. Two, prepare the script to load another script. But you can't keep loading script and expect them to switch. Once the script is loaded, it's loaded. — Mohammed Joraid, Aug 01 '17 at 12:05
@MJoraid so can you suggest any alternative or is it not possible — Raghav Patnecha, Aug 01 '17 at 12:58
@RaghavPatnecha yeah sure. What is the purpose of the code? I mean, why you want to replace the js script? — Mohammed Joraid, Aug 02 '17 at 02:15
The buttons are just acting as tabs and both personal and apps have a different scripts. Also running both the script simultaneously makes the page into an infinite loading loop. — Raghav Patnecha, Aug 02 '17 at 13:22

score 0 · Answer 1 · answered Aug 01 '17 at 13:00

try this :

<div id="summary">
<script src="user.js"></script>
</div>
<button type="button" onclick="app(1);">
Personal
</button>
<a href="#" onclick="app();">
Apps
</a>
<button type="button" >
Settings
</button>
<script>                        
function app(number) 
{
    if (number == null) {
        $('#summary').html("<script src='app.js' />")
    }
    if (number != null) {
        $('#summary').html("<script src='user.js' />")
    }
}
</script>

Replace and load another javascript file on button Click

1 Answers1