'How to use a variable in innerHTML statement to display specific object values

I have variables being passed from a button to a function go() in the HTML file. The function go() then calls an external function displayInfo() and passes the variable to it.

The code below displays "undefined". Is it possible to use the countryName string to target the objects instead of the object name?

document.getElementById("show-country").innerHTML = countryName.name;
document.getElementById("show-population").innerHTML = countryName.population;

index.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
    <script>
        function go(val)
        {  displayInfo(val); }
    </script>

    <input type="button" value="england" onclick="go(this.value)">
    <input type="button" value="france" onclick="go(this.value)">

    <div>
        <h1 id="show-country"></h1>
        <p id="show-population"></p>
    </div>


    <script src="countries.js" type="text/javascript"></script>
</body>
</html>

countries.js:

function displayInfo (countryName)
{
    var england =
    {
        name :      "England",
        population: "53.01 million"
    };
    var france =
    {
        name :      "France",
        population: "66.9 million"
    };


    document.getElementById("show-country").innerHTML = countryName.name;
    document.getElementById("show-population").innerHTML = countryName.population;
}

javascript

Solution 1:^[1]

Here is an example which may help you

  var countries={
  england :{
    name : "England",
    population: "53.01 million"
  },
 france:{
   name :  "France",
   population: "66.9 million"
 }
};

function displayInfo (countryName){
  document.getElementById("show-country").innerHTML = countries[countryName].name;
  document.getElementById("show-population").innerHTML = countries[countryName].population;
}

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <script>
    function go(val)
    {  displayInfo(val); }
    </script>
    <input type="button" value="england" onclick="go(this.value)">
    <input type="button" value="france" onclick="go(this.value)">
    <div>
      <h1 id="show-country"></h1>
      <p id="show-population"></p>
    </div>
    <script src="countries.js" type="text/javascript"></script>
  </body>
</html>

Solution 2:^[2]

In the countryName you just pass the value attribut of the button. In the javascript function you use countryName.name or population but countryName is only a string.

The solution is :

function displayInfo (countryName) { var data = null; var england = { name : "England", population: "53.01 million" }; var france = { name : "France", population: "66.9 million" };

if(countryName === "england"){
  data = england;
}
else{
  data = france;
}


document.getElementById("show-country").innerHTML = data.name;
document.getElementById("show-population").innerHTML = data.population;

}

Solution 3:^[3]

  var countries={
  england :{
    name : "England",
    population: "53.01 million"
  },
 france:{
   name :  "France",
   population: "66.9 million"
 }
};

function displayInfo (countryName){
  document.getElementById("show-country").innerHTML = countries[countryName].name;
  document.getElementById("show-population").innerHTML = countries[countryName].population;
}

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <script>
    function go(val)
    {  displayInfo(val); }
    </script>
    <input type="button" value="england" onclick="go(this.value)">
    <input type="button" value="france" onclick="go(this.value)">
    <div>
      <h1 id="show-country"></h1>
      <p id="show-population"></p>
    </div>
    <script src="countries.js" type="text/javascript"></script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Thomas Gicquel
Solution 3	user18042077

'How to use a variable in innerHTML statement to display specific object values

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]