Clash Royale CLAN TAG#URR8PPP

Change the value of variable on button click

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.

<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>


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;

)
);


let

3 Answers
3

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

myLoc

lat, lng

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>

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.

lat

long

myLoc

new L.LatLng

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>

$(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');

)
);
);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.