Change the value of variable on button click

Question

I have to select a marker in a map based on the button click. I have multiple marker with each marker associated to button below. I want to change "myloc" on that button click and by default it must select 13, 100.

Html

<div class="row">
    <input type="button" id="btn-first" class="btn-a" value = "First">
    <input type="button" id="btn-second" class="btn-a" value = "Second">
</div>

JS

let myloc = new L.LatLng(13, 100);
var map = L.map('map').setView(myloc, 12);

$(function () {
    $('.btn-a').on('click', function(e){
        e.preventDefault();
        var clsName = $(this).val();
        var lat, long;

        if (clsName == 'First') {
            lat = 13;
            long = 100;
        } else if(clasName = 'Second') {
            lat = 14;
            long = 101;
        }
    })
});

Answer 1

I dont see you setting the myLoc object anywhere. You are just assigning value for lat, lng. Check the snippet below to see if it answers your question.

Here, you initiliaze myLoc and on button click get new values for lat, lng and set it at the end again for myLoc

 //just a temp function to show the example. Dont add this in your code var L = { LatLng: function(lat, lng) { console.log("Current Values for Lat, Lng: " + lat + " , "+ lng); } } let myloc = new L.LatLng(13, 100); //var map = L.map('map').setView(myloc, 12); $(function () { $('.btn-a').on('click', function(e){ // e.preventDefault(); var clsName = $(this).val(); var lat, long; if (clsName == 'First') { lat = 13; long = 100; } else if(clasName = 'Second') { lat = 14; long = 101; } //set the myloc here myloc = new L.LatLng(lat, long); //then map again //L.map('map').setView(myloc, 12) }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <input type="button" id="btn-first" class="btn-a" value = "First"> <input type="button" id="btn-second" class="btn-a" value = "Second"> </div> 

Answer 2

Below is an approach you can use, similar to what you we're doing. The example uses event delegation to monitor button clicks and then sets the lat and long variables accordingly. Those variables are then used to update the value of the global myLoc . I used an object literal in place of your new L.LatLng object for simplicity.

 let myLoc = { lat: 13, long: 100 }; //new L.LatLng(13, 100); document.querySelector('.row').addEventListener('click', function(e) { if (e.target.type === 'button') { let lat = 0; let long = 0; if (e.target.id === 'btn-first') { lat = 13; long = 100; } else if (e.target.id === 'btn-second') { lat = 14; long = 101; } myLoc = { lat, long }; console.log(`myLoc.lat: ${myLoc.lat}; myLoc.long ${myLoc.long}`); //new L.LatLng(lat, long); } }); 

 <div class="row"> <input type="button" id="btn-first" class="btn-a" value="First"> <input type="button" id="btn-second" class="btn-a" value="Second"> </div> 

Answer 3

$(document).ready(function () {

            $('.btn-a').each(function () {
                $(this).click(function () {
                    var $this = $(this).val();
                    if ($this == 'First') {
                        $(this).val('One');
                    } else if ($this == 'Second') {
                        $(this).val('Two');
                    }
                })
            });
        });