Is it possible to use javascript to modify a script element?-CodePudding

Is there a way to use javascript to modify a script element?

Like for example:

HTML:

<script id="something" src="/js/file.js"></script>

Javascript:

var something = document.getElementById("something");
something.src = "/js/anotherfile.js"

Is it possible? Because I have a bit of code that works like that and it sort of doesn't work

To be specific, here's the code:

<!DOCTYPE html>
<html>

<head>
  <title>MyohTheGod's Website</title>
  <link rel="icon" type="image/x-icon" href="/supercorn.gif" defer>
  </link>
  <link id="css" href="/css/dark.css" rel="stylesheet" type="text/css">
  </link>
  <script src="/js/particles.js" defer></script>
  <script src="/js/header.js"></script>
  <script src="/js/theme.js"></script>
  <script>window.alert("Welcome to the Home of MyohTheGod. You can play games, check out our web proxies, and more. Also, please do check out the About page. Press OK to continue...");</script>
</head>

<body>
  -snip-
</body>
<script id="foot" src="/js/footer.js"></script>

</html>
<script>
  -snip-
</script>

var css = document.getElementById("css");
var foot = document.getElementById("foot");

function toggleDLmode(m) {
  -snip-
  if (dlmodebool) {
    css.href = "/css/dark.css"
    foot.src="/js/dark-footer.js"
  } else {
    css.href = "/css/index.css"
    foot.src="/js/footer.js"
  }
}

-snip-

CodePudding user response：

It is working, do you inspect it? It does changed, but maybe you're thinking, "hm why this /js/anotherfile.js is not downloaded?". Well because of the script tag is already rendered and already downloaded, so you can't do that. What you can do though add NEW script tag.

Maybe this will help How to dynamically change the script src?. This links would explain more why your code "does not work".

CodePudding user response：

There certainly is. You can use document.scripts which returns an collection that you can iterate through like an array. You can change the code using the innerHTML property very much like a normal element. See here https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

Edited to add: If you've got a html page with multiple script tags, the document.script collection has each script in the order they appear. The code below will log out the source (src tag) or the actual javascript for each script element.

You can also 'write' javascript by setting the innerHTML property.

IMHO it's a bit of a solution that's looking for a problem but at least it gives you access to the number of scripts you have.

[...document.scripts].forEach(script => {
  if (script.src != '') {
    console.log("Script source:"   script.src);
  } else {
    console.log(script.innerHTML);
  }
});