Altering an external .js file with Javascript or jQuery

Question

I'm currently developing a platformer video game and I want players to be able to be able to choose what skin the Player icon will use. (the file names are in square brackets [])

......

to do this I'm using an html file (which will be the gui menu were players choose their skin) [Skin Select.html]

<input type="button" id="Skin1" onClick="">

and an external .js file containing a PlayerIcon variable that is globally linked to all the levels in the game. [Variable.js]

var PlayerIcon = 0; //Players Icon will change depending on what value this is

......

I've search this question before. But I don't understand how the methods people are providing work. I know that you can accomplish this using jquery but I don't understand the idea behind it.

So if your answering. Would you mind also telling me exactly which attributes I will need to edit in order to make this work? Thanks ahead of time!

(I'm pretty good with JavaScript, however I don't have any experience with jQuery)

Answer 1

The file itself does not need to be altered. The value of the variable PlayerIcon can be set to a value selected by user.

You can use <select> , <option> elements, change event to set value for PlayerIcon variable.

 let PlayerIcon = 0; document.querySelector("select").onchange = function() { PlayerIcon = Number(this.value); console.log(PlayerIcon); } 

 <select name="skin"> <option>select a skin</option> <option value="1">skin 1</option> <option value="2">skin 2</option> <option value="3">skin 3</option> </select>