CODEWITHSUNDEEP
javascriptjquery
Priyanshu Mittal
Priyanshu Mittal

Reputation: 29

How to include a javascript file into another javascript file?

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.

Upvotes: 2

Views: 142

Answers (2)

Rob Monhemius
Rob Monhemius

Reputation: 5144

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

Upvotes: 4

imvain2
imvain2

Reputation: 15847

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

Upvotes: 1

Related Questions