Passing data from one js to another js

Question

I have two js: (1st) is where i can add the map and where i can click a button and draw shapes(geozone) and (2nd) is where i can change color and opacity of the shapes using colorpicker and summernotes.

I can get the color in the colorpicker in the (2nd) js using

$('#colorpicker'+no).colorpicker().on('changeColor', function() {
            var no = $(this).attr('map'); 
            var color = $('#txtGeoColor'+no).val();
            console.log("color1 : " , color);
        });

and its inside the document.ready(function()).

is it possible to call the color from the (2nd) js and pass it to (1st) js inside this code:

$("#mapContainer").on("click", ".btnCircleDraw",function(){
        var circleDrawer = new L.Draw.Circle(map, {
            shapeOptions: {
                color: (must call the color here)
            }
        });   
        circleDrawer.enable();
    });

Answer 1

To use the color variable inside the 2nd file. you need to import 1st file above the second file. like

File 1:

var color = '';
$('#colorpicker'+no).colorpicker().on('changeColor', function() {
            var no = $(this).attr('map'); 
            color = $('#txtGeoColor'+no).val();
            console.log("color1 : " , color);
        });

File 2:

$("#mapContainer").on("click", ".btnCircleDraw",function(){
        var circleDrawer = new L.Draw.Circle(map, {
            shapeOptions: {
                color: color
            }
        });   
        circleDrawer.enable();
    });

Always keep in mind that import file 1 before file 2 because file 2 contain a color variable that is initialized and assign in file 1.

File Where both js file will consume.

<script src="file1.js">
<script src="file2.js">