Javascript | dynamically loaded script but unable to read/use variables in file right after-CodePudding

Sorry for this question / issue but I have tried to search and research over internet without finding a solution. I'm loading a script dynamically with the following code (in the body of the document there's just a header and footer, and all the scripts below are placed just before ending the body):

    <script src="variables.js"></script>
    <script src="script.js"></script>
    <script>
        var krama_param = get()
        var scriptTag = document.getElementsByTagName('script')
        scriptTag = scriptTag[scriptTag.length - 1]
        var s = document.createElement("script")
        s.setAttribute("src", "test.js")
        scriptTag.after(s)
    </script>
    <!--<script>
        var krama_param = get()
    </script>
    <script src="input/trikona.js"></script>-->
    <script>
        console.log(hello)
    </script>

The script I'm inserting dynamically is supposed to run right where I commented the two in the middle but for some reason is making me become crazy as I'm not able to reference any variable in that document because it's undefined yet. Based on the debugging I realized the js file dynamically loaded is processed at the very end of the html script, but why is this happening if I'm telling the script to avoid async functionality (async=false)?

Is there something else I should be checking or any troubleshooting suggestion anyone has please?

Update: provided new code above with simplifications suggested as per the comments received but still same problem. In addition also troubleshoot with the concept of calling a very simple file (test.js) that I newly created with only one variable (like var test = "hello"), super simple, but still unable to read that test variable in the script after that console.log(hello) and it's returning the error Uncaught ReferenceError: hello is not defined at

Update 2: Could someone please sent me a super simple working example of loading a dynamic script and using a variable in it right after in another script?

CodePudding user response：

Let's try using document.write ?

<h1>hello</h1>

<script>
  var url = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";

  document.write("<scr"   "ipt src='"   url   "'>"   "</scr"   "ipt>");
</script>

<script>
  console.log(jQuery);
</script>

<h2>bye</h2>

CodePudding user response：

I would make like that:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      let scriptEle = document.createElement("script");
      scriptEle.async = false;
      scriptEle.defer = true;
      scriptEle.setAttribute("src", "./t.js");
      document.head.appendChild(scriptEle);

      let scriptEle1 = document.createElement("script");
      scriptEle1.async = false;
      scriptEle1.defer = true;
      scriptEle1.setAttribute("src", "./t1.js");
      document.head.appendChild(scriptEle1);
    </script>
  </head>
  <body></body>
</html>

content of t.js:

console.log(1111);
let test = 1000;

content of t1.js:

console.log(2222);
console.log(test);