0

Edited the codes to add in full code

<!DOCTYPE html>
<html>
<body>

<h2>Make a table based on JSON data.</h2>

<button onClick="makeAjaxQueryMarket()">
Table1
</button>

<button onClick="makeAjaxQueryMarket2()">
  Table2
  </button>
<script>

function makeAjaxQueryMarket(){

  var xhttp = new XMLHttpRequest();


  xhttp.onreadystatechange = function() {

    readyStateChangeHandler(xhttp);

  };

  xhttp.open("GET", "country.json", true);
  xhttp.send();
}


function readyStateChangeHandler(xhttp){

  if (xhttp.readyState == 4){

    if(xhttp.status == 200){

      handleStatusSuccess(xhttp);

    }else{

      handleStatusFailure(xhttp);

    }
  }

}


function handleStatusFailure(xhttp){



  var displayDiv = document.getElementById("display");

  displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
}

function handleStatusSuccess(xhttp){

  var jsonText = xhttp.responseText;

  // parse the json into an object
  var currencyObj = JSON.parse(jsonText);

  // display the object on the page
  displayCurrency(currencyObj);
}


// display the market object on the page
function displayCurrency(currencyObj){

  var html = "Table1";

  html += "<table border='1'>";

  html += "<tr><th>Name</th><th>Alpha-2</th><th>Currency</th></tr>";

  for(var i=0; i < currencyObj.CountryList.length; i++){

    var recordObj = currencyObj.CountryList[i];

    html += "<tr>";

    html += "<td><b>" + recordObj.name + "</b></td>";
    html += "<td align='right'>" + recordObj.alpha2 + "</td>"; 


    html += "<td align='right'>" + recordObj.currency+ "</td>"; 

    html += "</tr>"; 
  }

  html += "</table>"; 

  // show the constructed HTML code in the display div
  var displayDiv = document.getElementById("display");
  displayDiv.innerHTML = html;
}


</script>


</body>
</html>

I want to insert multiple buttons to generate different tables. <Button> Onclick ="makeAjaxQuery()" </button>

Currently, I am able to generate a table from this. But what i wanted to do is to code more buttons to generate a different table. However, when i try to use the same code, i could not produce the tables, instead it all ended up the same. I have tried to use different names for the functions.. but doesn't help.

Is possible to put words in the function bracket of my AjaxQuery? like makeAjaxQueryMarket(tb2)

TryPenta
  • 45
  • 5
  • It's unclear what your "multiple button" problem is. It sounds like you want every button to generate a different output, but you are not explaining how the output should be different, so it's difficult to suggest what to do. Please provide a more complete example that demonstrates your issue better. As a general solution: That's what function arguments for. Every button can pass different information to the function. – Felix Kling Nov 21 '19 at 10:54
  • Hey, I added a more complete code. as of now I am still struggling to figure this out. – TryPenta Nov 22 '19 at 14:49
  • You have to [create the elements](https://stackoverflow.com/questions/8302166/dynamic-creation-of-table-with-dom). – Chris W. Nov 22 '19 at 14:53

0 Answers0