looped values are not printing in div via javascript

Question

I am trying to print the address and details of my clinics in various locations. However, when i try to do that it is only printing the first element in my div.

Here is my code

    var markerNodes = xml.documentElement.getElementsByTagName("marker");
               var bounds = new google.maps.LatLngBounds();
               for (var i = 0; i < markerNodes.length; i++) {
                 var id = markerNodes[i].getAttribute("id");
                 var locname = markerNodes[i].getAttribute("locationName");
                 var locaddress = markerNodes[i].getAttribute("locationAddress1");
                 var address = markerNodes[i].getAttribute("locationAddress1");
                 var distance = parseFloat(markerNodes[i].getAttribute("distance"));
                 var servicename = markerNodes[i].getAttribute("serviceName");
                 var clinicfname= markerNodes[i].getAttribute("clinicFname");
                 var cliniclname= markerNodes[i].getAttribute("clinicLname");
                 var clinicname= clinicfname + ' ' + cliniclname ;
                 var clinicAddress= markerNodes[i].getAttribute("clinicAddress");
                 var clinicCity= markerNodes[i].getAttribute("clinicCity");
                 var clinicPhone= markerNodes[i].getAttribute("clinicPhone");
                 var cname= markerNodes[i].getAttribute("cname");
                 var latlng = new google.maps.LatLng(
                      parseFloat(markerNodes[i].getAttribute("locationLat")),
                      parseFloat(markerNodes[i].getAttribute("locationLong")));
                  document.getElementById('details_name').innerHTML = clinicname;


                      //console.log (parseFloat(markerNodes[i].getAttribute("locationLong")));

                 createdetails(clinicname,clinicAddress)
                 bounds.extend(latlng);
               }

In above code am calling a function name createdetails


    function createdetails(clinicname,clinicAddress)
    {
     document.getElementById("details_name").innerHTML=clinicname;
     document.getElementById("details_address").innerHTML=clinicAddress;
    }

But this div is priniting only first name and first addrees.It have 9 diffrent values for name and address.When i consoled it,it prints.

What is the problem here?

Please click edit, then `[<>]` snippet editor and make a [mcve] with example xml — mplungjan, Apr 08 '20 at 09:33
you call 9 times the function which every time overrides the innerHTML of two elements. So only the last address will be innerHTML-ed — Fabrizio Calderan, Apr 08 '20 at 09:36

score 0 · Answer 1 · answered Apr 08 '20 at 09:36

0

When you are calling document.getElementById("details_name").innerHTML = ..., you are overwriting the current value. Maybe you should append the new name to the existing content with +=:

function createdetails(clinicname,clinicAddress)
{
 document.getElementById("details_name").innerHTML+=clinicname;
 document.getElementById("details_address").innerHTML+=clinicAddress;
}

answered Apr 08 '20 at 09:36

pierreavn

607
6
16

It doesnt works, it print only first clinic name,,multiple time – Joshy Kaithkad Apr 08 '20 at 10:27

looped values are not printing in div via javascript

1 Answers1