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

javascript innerhtml append
innerhtml jquery
get innerhtml value
ajax innerhtml
css innerhtml
javascript get html
get innerhtml of div
getelementsbyname innerhtml

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;
}

The way you're currently going about it, no. You could store your countries in an object, and then target the objects keys:

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

Then use bracket notation to display the properties if it exists:

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

HTML DOM innerHTML Property, JS Statements · break class continue getNamedItem() isId item() length name removeNamedItem() setNamedItem() specified value Definition and Usage. The innerHTML property sets or returns the HTML content (inner HTML) of an element. Return Value: A String, representing the HTML content of an element​  Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question.Provide details and share your research! But avoid …. Asking for help, clarification, or responding to other answers.

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>

Javascript Tutorial - innerHTML, Variables Javascript - Functions Javascript - Events Javascript - Statements Javascript However, using innerHTML requires some preparation if you want to be able to use it </p> <input type='button' onclick='changeText()' value='​Change Text'/> Let's say we didn't like the text that was displayed in our paragraph and  The document.write() method would allow you to print a value directly on browser display. This is could be done for debugging purposes if you don’t want to use the console. element.innerHTML() or element.textContent() is another way to place the variable’s value into an document element for display.

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;

}

How to display variables in HTML that are determined by Javascript , For the variable value, there is a javascript command: [code]document.​innerHTML( ) [/code]Within the brackets is where you should put the variable It you want to put it in a string, use quotes but don't use them on variable How do I store the user input from a prompt in JavaScript and then use this input in an if statement? If your browser supports debugging, you can use the ____ method to display JavaScript values in the browser. console.log() JavaScript uses the ____ keyword to define variables.

Element.innerHTML, Setting the value of innerHTML lets you easily replace the existing As a result, the document contents are replaced with a display of the page's The specified value is parsed as HTML or XML (based on the document type), resulting in a DocumentFragment object representing the new set of  TRUE/FALSE: When an object reference is passed to a method, the method may change the values in the object. True TRUE/FALSE: If you write a toString method for a class, Java will automatically call the method any time you concatenate an object of the class with a string.

String and variable with innerhtml - JavaScript, Hi, How do I get a string and a variable to output with innerhtml? I have tried, function changeTextOne(){ var x = 3; document. JavaScript variables are containers for storing data values. In this example, x, y, and z, are variables: In this example, price1, price2, and total, are variables: In programming, just like in algebra, we use variables (like price1) to hold values. In programming, just like in algebra, we use variables in expressions (total = price1 + price2).

JavaScript: The Web Technologies Series, method of the Table object to delete the single row in the table that displays the text Notice that the statements use the cells[] array of the TableRows object to access the cell values through the innerHTML property. var curItem = document. named removeItem() and the last statement increments the curRow variable,  To change to the Variable: drive, use the following command: Set-Location Variable: To list the items and variables in the Variable: drive, use the Get-Item or Get-ChildItem cmdlets. Get-ChildItem Variable: To get the value of a particular variable, use file system notation to specify the name of the drive and the name of the variable.