javascript : built an html form from json, but can't update the form

debugcn Published at Dev

masCh Kisiel

I have a javascript code that takes objects from json.

from this, i built an html string:

   var htmlstr = "<table border=0>";
    for (var i=0;i<jsonData.people.length;i++) {
        htmlstr=htmlstr+"<tr><td>" + jsonData.people[i].name + "</td>";
        htmlstr=htmlstr+"<td>"+ jsonData.people[i].cash + "</td>";
        htmlstr=htmlstr+"<td><button onclick='changeCash(i)'>Update</button></td></tr>";
        }
    htmlstr=htmlstr+"</table>";

layer.addFeatures(features);
layer.events.on({ "featureselected": function(e) { updateMak('mak', htmlstr) } });

    function changeCash(k) {
       jsonData.people[k].cash=jsonData.people[k].cash+100;
       }

The HTML page is as follows:

    <script type="text/javascript">
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                  alert("Mobile device detected.");             }
                function updateMak(id,content) {
                    var container = document.getElementById(id);
                    container.innerHTML = content;
                } </script> 
<div id="mak"> List of People  </div>

Lets say this displays 10 people with their money. If I click on one of their Update buttons, I think the json data is updated as intended. But I don't know how to verify it. The values in the form doesn't update the new value from the changeCash function.

How do I update the htmlstr and also update what's already displayed on screen?

Please advise.

user3192244

When you generate htmlstr for the people cash

htmlstr=htmlstr+"<td>"+ jsonData.people[i].cash + "</td>";

You should also generate id for this td so that you can update the content from the function changeCash(k).

Something like

htmlstr=htmlstr+"<td id='peoplecash"+i+"'>" + jsonData.people[i].cash + "</td>";

And then in your changeCash function

function changeCash(k) {
   jsonData.people[k].cash=jsonData.people[k].cash+100;
   var peoplecash= document.getElementById("peoplecash"+k);
   peoplecash.innerHTML = jsonData.people[k].cash;}

Collected from the Internet

Please contact [email protected] to delete if infringement.