JavaScript/jQuery：命名函数

Question

I found this code online that fulfills my need for one function for my website.

$(document).ready(function () {
        var markers = []; // define global array in script tag so you can use it in whole page
        var myCenter = new google.maps.LatLng(1.3000, 103.8000);
        var mapProp = {
            center: myCenter,
            zoom: 6,
            minZoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true
        };
        //google map object
        var map = new google.maps.Map(document.getElementById("map"), mapProp);

        //change event of input tag where type=file and  id=filename
        $("#filename").change(function (e) {

            var ext = $("input#filename").val().split(".").pop().toLowerCase();

            if ($.inArray(ext, ["csv"]) == -1) {
                alert('Upload CSV');
                return false;
            }

            if (e.target.files != undefined) {

                var reader = new FileReader();
                reader.onload = function (e) {

                    var csvval = e.target.result.split("\n");
                    var csvvalue;

                    for (var i = 0; i < csvval.length; i++) {
                        markers[i] = [];
                        csvvalue = csvval[i].split(",");
                        markers[i][0] = csvvalue[0]; //id
                        var lat = csvvalue[2]; //latitude
                        var lng = csvvalue[3]; //longitude

                        var code = csvvalue[0];


                        if (code.includes("AB")) {
                            var nsMarker = new google.maps.Marker({
                                icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                                position: new google.maps.LatLng(lat, lng),
                                map: map

                            });



                        } else if (code.includes('CD')) {
                            var ewMarker = new google.maps.Marker({
                                icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                                position: new google.maps.LatLng(lat, lng),
                                map: map
                            });

                        } else if (code.includes('EF')) {
                            var neMarker = new google.maps.Marker({
                                icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
                                position: new google.maps.LatLng(lat, lng),
                                map: map
                            });

                        } else if (code.includes('GH')) {
                            var ccMarker = new google.maps.Marker({
                                icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
                                position: new google.maps.LatLng(lat, lng),
                                map: map
                            });

                        } else if (code.includes('IJ')) {
                            var dtMarker = new google.maps.Marker({
                                icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                                position: new google.maps.LatLng(lat, lng),
                                map: map
                            });

                        } else if (code.includes('KL')) {
                            var cgMarker = new google.maps.Marker({
                                icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                                position: new google.maps.LatLng(lat, lng),
                                map: map
                            });

                        }

                        //markers[i][1] = new google.maps.Marker({
                        //    position: new google.maps.LatLng(lat, lng),
                        //    map: map
                        //});
                    }

                };
                reader.readAsText(e.target.files.item(0));
            }

            return false;

        });
    });

This function primarily enables for the user to upload a csv file of coordinates and then will create markers on the map to mark these locations. However, there is no explicit function name stated. This is the html portion:

<input type="file" id="filename" name="filename" />

for the user to select the .csv file they want to upload. My question is, how do I implement a similar set of code if I want the users to be able to upload another input .csv file to do other stuff?? like fundamentally it would be the same, they'll upload a .csv file and the latitudes and longitudes will be extracted to determine the various locations in the input, but I want to add on some other functions to this other .csv file. Can I just add in a function name like

$(document).ready(function() readAllLocations { ... // for the FIRST .csv in 

question

, then for the second time I need this similar function I just add in another script tag starting with

$(document).ready(function() secondFunction {....

and for the html call secondFunction from an onclick="secondFunction()" or what?? I have very little experience with JavaScript so do forgive me if my question sounds stupid if anything. I have just been tryna figure this out the entire day and I can't. Thanks y'all!

Answer 1

This is how I think you can do it (there might be different ways, this is what I can think of right now);

First you make different input s in you HTML with different id's for different tasks.

Then you put all the code that you need to repeat with each input, inside a function like;

function processInput (selector, callback) {
    $(selector).change(function (e) {       
        var ext = $(this).val().split(".").pop().toLowerCase();
        // Here "this" refers to the selector.

        if ($.inArray(ext, ["csv"]) == -1) {
            alert('Upload CSV');
            return false;
        }

        if (e.target.files != undefined) {

            var reader = new FileReader();
            reader.onload = function (e) {

                var csvval = e.target.result.split("\n");
                var csvvalue;

                for (var i = 0; i < csvval.length; i++) {
                    markers[i] = [];
                    csvvalue = csvval[i].split(",");
                    markers[i][0] = csvvalue[0]; //id
                    var lat = csvvalue[2]; //latitude
                    var lng = csvvalue[3]; //longitude

                    var code = csvvalue[0];


                    if (code.includes("AB")) {
                        var nsMarker = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                            position: new google.maps.LatLng(lat, lng),
                            map: map

                        });


                    } else if (code.includes('CD')) {
                        var ewMarker = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                            position: new google.maps.LatLng(lat, lng),
                            map: map
                        });

                    } else if (code.includes('EF')) {
                        var neMarker = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
                            position: new google.maps.LatLng(lat, lng),
                            map: map
                        });

                    } else if (code.includes('GH')) {
                        var ccMarker = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
                            position: new google.maps.LatLng(lat, lng),
                            map: map
                        });

                    } else if (code.includes('IJ')) {
                        var dtMarker = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                            position: new google.maps.LatLng(lat, lng),
                            map: map
                        });

                    } else if (code.includes('KL')) {
                        var cgMarker = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                            position: new google.maps.LatLng(lat, lng),
                            map: map
                        });

                    }

                    // I am assuming this is where you wish to do different tasks,
                    // feel free to move the block below, to where you need.

                    if(typeof callback === 'function' && callback()){
                        // Here the "if" staement checks if "callback" is a function,
                        // you may remove it if you do not need to check.

                        callback(i);
                        // This is for the different tasks.
                        // We're passing "i" as parameter to use when we call the function.
                    }

                    //markers[i][1] = new google.maps.Marker({
                    //    position: new google.maps.LatLng(lat, lng),
                    //    map: map
                    //});
                }

            };
            reader.readAsText(e.target.files.item(0));
        }

        return false;

    });
}

Then for different tasks (for different inputs), we call the function(s) like;

processInput("#filename", function(i) {
    // ..And this is how you would call the function.

    //markers[i][1] = new google.maps.Marker({
    //    position: new google.maps.LatLng(lat, lng),
    //    map: map
    //});
});

processInput("#secondfile", function(i) {
    // ..And as many times you need.
    // Put the tasks you want to do for the input with id "#secondfile" below;

    //markers[i][1] = new google.maps.Marker({
    //    position: new google.maps.LatLng(lat, lng),
    //    map: map
    //});
});

You put all the above where you have $("#filename").change(function (e) { codes }); , as in the question.

Please note that, I do not understand completely how jQuery's .change() works, so I tried to not change anything I thought is related to it, If your code as in the question works as you expect, this should work as well.

Also please check your part of the codes before actual use, I copied them, so I might have made some mistake; But hope you get the answer, and understand what I did.

Check and let me know, and ask if you have any questions!