Question 245940 in Html Question posted in
Some basic documentation can be found here.

Html – Dynamically removing and adding JavaSript file

I am trying to add and remove js file dynamically by using the technique of add and remove html elements :

  function start(){
      var scriptElement = document.createElement('script');
          scriptElement.src = 'js/game_page.js'; 
          scriptElement.id = "game1";
          document.body.appendChild(scriptElement);
      }
       start();
       function stop(){
        var a = document.getElementById("game1");
        a.parentNode.removeChild(a);
       }
        stop();

In this case,the js file which is appended in DOM is still working even after calling stop()
Also share if any other way so that I could do the following thing,

Expectation:

Algorithm :

 add work1.js
onclick of  button{
  if(condition1)
  {
     remove work1.js //may contain same declarations,so removing is also important
     add work2.js
  }
  else
  {
     if(work2.js present)
     {
       remove work2.js
       add work1.js
     } 
  }
}
Tags:

2

Answers


  1. 0

    JavaScript is loaded with the page, individual script files cannot be loaded/unloaded after the page has loaded.

    If you are trying to make certain code run only when a button is pressed, perhaps you can contain it in a function, or the method of an object and run it from there:

    let lastRun = null;
onclick of  button{
  if(condition1)
  {
     removeWork1(); // Function that undoes whatever work1 creates.
     work2();
     lastRun = "work2";
  }
  else
  {
     if(lastRun === "work2")
     {
       lastRun = "work1";
       work1();     } 
  }
}

    It would be a lot easier to help you with your situation if you update your question to include what code would be running from these scripts. Are you trying to modify the dom, change the page?

    Login or Signup to reply.
  2. 0

    The issue you’re facing is that the JavaScript file game_page.js is not being removed as expected. This is because you are calling the stop() function immediately after calling the start() function. Since the browser loads and executes scripts asynchronously, the stop() function may run before the game_page.js script is fully loaded and executed.

    To achieve your desired behavior, you should ensure that the removal of the script happens after the script has finished loading and executing. You can do this by listening to the load event of the dynamically added script. Here’s how you can modify your code:

    function start() {
  var scriptElement = document.createElement('script');
  scriptElement.src = 'js/game_page.js';
  scriptElement.id = 'game1';

  // Listen to the 'load' event of the script
  scriptElement.onload = function () {
    // The script has finished loading and executing, now you can remove it
    stop();
  };

  document.body.appendChild(scriptElement);
}

function stop() {
  var a = document.getElementById('game1');
  a.parentNode.removeChild(a);
}

// Call the start function to load the script
start();

    With this modification, the stop() function will be called after the game_page.js script has finished loading and executing.

    Regarding your expectation of dynamically swapping JavaScript files, you can use a similar approach. Here’s a simplified example:

    let currentScript = null;

function loadScript(scriptSrc) {
  if (currentScript) {
    // Remove the current script if one exists
    document.body.removeChild(currentScript);
  }

  const scriptElement = document.createElement('script');
  scriptElement.src = scriptSrc;

  // Listen to the 'load' event of the script
  scriptElement.onload = function () {
    currentScript = scriptElement;
  };

  document.body.appendChild(scriptElement);
}

// Example usage:
document.getElementById('button').addEventListener('click', function () {
  if (/* your condition here */) {
    loadScript('js/work2.js');
  } else {
    loadScript('js/work1.js');
  }
});

    This code listens for a button click event and dynamically loads and replaces JavaScript files based on a condition. The loadScript function removes the current script (if any) and adds the new script dynamically.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search