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.

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. — imvain2, May 07 '20 at 21:13
maybe this question can help you https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file — caiopsilva, May 07 '20 at 21:15
@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, May 07 '20 at 21:16
@caiopsilva I tried most of the methods available to me in the question you mentioned, none of that works! — Priyanshu Mittal, May 07 '20 at 21:17
@PriyanshuMittal, I have a solution to the problem of using it elsewhere in my answer below. https://stackoverflow.com/a/61667984/3684265 — imvain2, May 07 '20 at 21:27

Rob Monhemius · Accepted Answer · 2020-05-08T15:16:45.210

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

imvain2 · Answer 2 · 2020-05-07T21:30:14.627

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);
});

How to include a javascript file into another javascript file?

2 Answers2