Changing content in popup

by FranceImage

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>
<div id="map" ></div>
<div id="testTimer">
</div>

CSS

#map {
    height: 400px;
}

JavaScript

var lat = 46.566414;
var lng =  2.4609375;
var zoom =  5;

var map = new L.Map('map');

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data &copy; OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 8, attribution: osmAttrib});
map.addLayer(osm);

map.setView(new L.LatLng(lat, lng), zoom);

var theTimer = false;
var theMarkerName = false;

/* Marker 1 */
var marker1 = new L.Marker([48.862312, 2.332317]);

marker1.bindPopup('Time is <span id="time"></span>.');
marker1.addTo(map);

marker1.on('popupopen', function(e) {
   theMarkerName = 'Marker 1';
   refreshTime();
   theTimer = setInterval(refreshTime, 2000);
});
marker1.on('popupclose', function(e) {
   clearInterval(theTimer);
});

/* Marker 2 */
var marker2 = new L.Marker([45.862312, 2.332317]);

marker2.bindPopup('Time is <span id="time"></span>.');
marker2.addTo(map);

marker2.on('popupopen', function(e) {
   theMarkerName = 'Marker 2';
   refreshTime();
   theTimer = setInterval(refreshTime, 2000);
});
marker2.on('popupclose', function(e) {
   clearInterval(theTimer);
});




function refreshTime() {
    var d = new Date();
    document.getElementById("time").innerHTML = d.toLocaleTimeString() + ' for ' + theMarkerName;
    document.getElementById("testTimer").innerHTML = d.toLocaleTimeString() + ' for ' + theMarkerName;
}