从另一个文件更改 Javascript 变量值

Question

Hey Guys I have a file called map.php and i want to change the center value as shown in the code to a different value passed from another JS file called template.js. Previously, I have changed the values of other HTML values using set attribute and query selector function, but i don't know how to access a JavaScript variable and change the value. I don't know if query selector function works for selecting JavaScript variables. Any help is appreciated. Thanks a lot.

Javascript (map.php)

<script>
var map = new mapboxgl.Map({
container: 'map',  

style:'mapbox://styles/joelcherian/ckkg9x7f2063917o1kexgn9ho',

 center: [115.83333, -32.01667],  // accept change from template.js
 
 zoom: 12  
 
});

</script>

Answer 1

You can access the variable from the other file if they share the same scope: your declaration of map is global (the scope is window) so you can access it just by using it: map.flyTo({ center: yourCenterHere }); .

The only thing to care is that your script that call the variable runs after it has been created.

Now you have two ways:

1. Define a variable in template and use it inside your map.php , but including your script before the one requiring it (the window word is optional because is the default global scope).

// template.js
window.myCenterVariable = yourCenterHere;

<script src="template.js"></script>
<script>
var map = new mapboxgl.Map({
container: 'map',  

style:'mapbox://styles/joelcherian/ckkg9x7f2063917o1kexgn9ho',

 center: window.myCenterVariable,  
 
 zoom: 12  
 
});

</script>

2. Creating the map through the script and then manipulate it into your template.js file:

<script>
window.map = new mapboxgl.Map({
container: 'map',  

style:'mapbox://styles/joelcherian/ckkg9x7f2063917o1kexgn9ho',
 center: [115.83333, -32.01667],  
 zoom: 12  
});

</script>
<!-- NOTE: I include template AFTER the above script has been executed -->
<script src="template.js"></script>

// template.js
window.map.flyTo({ center: yourCenterHere });

Answer 2

First of all, you can write the code to template.js file.

const newValue = [0, 0];
module.exports.update = function(mapObj){
    mapObj.center = newValue;
}

And you can edit your code in map.js file.

var r=require("./template.js");
var mapObj = {
container: 'map',  

style:'mapbox://styles/joelcherian/ckkg9x7f2063917o1kexgn9ho',

 center: [115.83333, -32.01667],  // accept change from template.js
 
 zoom: 12  
 
};
r.update(mapObj);
var map = new mapboxgl.Map(mapObj);