How to include a javascript file into another javascript file?

Question

I have tried several ways but nothing is working, I want to put the contents of one javascript file into the other, the code I tried is:

for (k = 0; k < js_array2; k++) {
 p[k]=Math.random();
 if(p[k]<0.5){
 $.getScript('/path/to/imported/script.js')
 } else {
//Some code 
}

The code in the script I want to include is:

var c = document.getElementById("canvas[" + k + "]");
 document.getElementById("shape[" + k + "]").innerHTML = "Square";
 var ctx = c.getContext("2d");
 var width = c.width;
 var height = c.height;
 //ctx.strokeRect(0, 0, 120, 120);
 var n = hour2[k];
 var z = 0;
 var m = minute2[k];
 for (i = 1; i <= n; i++) {
 for (j = 1; j <= n; j++) {
 var x = 0 + (i - 1) * width / n;
 var y = 0 + (j - 1) * height / n;
 ctx.beginPath();
 ctx.rect(x, y, width / n, height / n);
 ctx.fillStyle = "cyan"
 if (z < m) {
 ctx.fillRect(x, y, width / n, height / n);
 z = z + 1;
 }
 ctx.stroke();
 }
 }

I have tried several other ways too but this was the only one without errors but unfortunately no output.

• imvain2: Do you have access to modify the script in the second file? One way is to wrap the code in the second file in a function and load that file then on load, run that function. Obviously the best way is simply combine them into one single file through.
• caiopsilva: maybe this question can help you stackoverflow.com/questions/950087/…
• Priyanshu Mittal: @imvain2 the thing is I have access to the file but making a function will require making changes at the places it is being used already!
• Priyanshu Mittal: @caiopsilva I tried most of the methods available to me in the question you mentioned, none of that works!
• imvain2: @PriyanshuMittal, I have a solution to the problem of using it elsewhere in my answer below. stackoverflow.com/a/61667984/3684265

Answer 1

In modern JavaScript it would look something like this:

export something from a file

export c = //whatever

import it dynamically from another file

if(some_condition){
 {c} = await import('/path/to/imported/script.js')
 // do whatever with c
}

Read more on exports on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Read more about imports on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports

Answer 2

What you can do is create a function out of the second file, then check to see if K exists and the corresponding canvas exists on the page and run it for the other pages.

So for example this would be script.js:

function createSquare(k){
var c = document.getElementById("canvas[" + k + "]");
 document.getElementById("shape[" + k + "]").innerHTML = "Square";
 var ctx = c.getContext("2d");
 var width = c.width;
 var height = c.height;
 //ctx.strokeRect(0, 0, 120, 120);
 var n = hour2[k];
 var z = 0;
 var m = minute2[k];
 for (i = 1; i <= n; i++) {
 for (j = 1; j <= n; j++) {
 var x = 0 + (i - 1) * width / n;
 var y = 0 + (j - 1) * height / n;
 ctx.beginPath();
 ctx.rect(x, y, width / n, height / n);
 ctx.fillStyle = "cyan"
 if (z < m) {
 ctx.fillRect(x, y, width / n, height / n);
 z = z + 1;
 }
 ctx.stroke();
 }
 }
}
if(typeof k != "undefined" && document.getElementById("canvas[" + k + "]") != null){
 createSquare(k);
}

Then to include it:

$.getScript('/path/to/imported/script.js',function(){
 createSquare(k);
});