单击按钮时更改文本的正确函数语法

Question

我的老师让我们对创建一个函数的语法感到困惑，该函数完全替换数组内部对象中的段落和单词。她也没有解释换行符语法以及如何正确连接换行符字符串。我的函数语法做错了什么？为什么我们使用函数而不是警报？var button = document.getElementById("scinfo");var states = {  "eachstate": [{      "Name": "North Carolina",      "Capital": "Raleigh",      "Population": "986,000",      "StateBird": "Who Cares"    },    {      "Name": "South Carolina",      "Capital": "Columbia",      "Population": "886,000",      "StateBird": "Hawk"    },    {      "Name": "Florida",      "Capital": "Tallahasee",      "Population": "975,000",      "StateBird": "Flamingo"    },  ]};button.addEventListener("click", writestates, false);function writestates() {  document.getElementById("StateInfo").innerHTML = "<p>Name: " + states.eachstate[0].name + "</p>" + "<p>" + "Capital: " +    states.eachstate[0].capital + "</p>" + "<p>" + "Bird: " + states.eachstate[0].bird + "</p>" + "<p>" + "Population: " +    states.eachstate[0].population + "</p>"}<!-- Create a button to write out ONLY SC information when clicked --><button id="states" type="button">SC Information</button><div class="showstate">  <h1>    South Carolina  </h1>  <p id="StateInfo">    This is where the new information should show up!  </p></div>

Answer 1

回答：

• 您的按钮的标识符为states,不 scinfo

• 将 button 更改为document.getElementById("states") not document.getElementById("scinfo")，因为该 ID不存在。

• 您需要使用正确的索引。

• 您指向数组，states.eachstate但提供了查看第一项的零( [0] )索引。

• 南卡罗来纳州信息位于第二项中，其索引为1。( [1] )

• 您需要提供property与数据相关的大小写正确的名称。这些是区分大小写的

• states.eachstate[1].population 是不一样的states.eachstate[1].Population

• 您需要提供正确的属性名称。

• 您使用states.eachstate[0].birdwhen 在您的数据中列为states.eachstate[0].StateBird

例子：

var button = document.getElementById("states");

var states = {

    "eachstate": [

        {

        "Name":"North Carolina",

        "Capital": "Raleigh",

        "Population": "986,000",

        "StateBird": "Who Cares"

    },

        {

        "Name": "South Carolina",

        "Capital": "Columbia",

        "Population": "886,000",

        "StateBird": "Hawk"

    },

        {

        "Name": "Florida",

        "Capital": "Tallahasee",

        "Population": "975,000",

        "StateBird": "Flamingo"

            },

    ]

};

button.addEventListener("click", writestates, false);

function writestates()

{

    document.getElementById("StateInfo").innerHTML = "<p>Name: " + states.eachstate[1].Name + "</p>" + "<p>" + "Capital: "

        + states.eachstate[1].Capital + "</p>" + "<p>" + "Bird: " + states.eachstate[1].StateBird + "</p>" + "<p>" + "Population: " +

        states.eachstate[1].Population + "</p>"

}

<button id="states" type="button">SC Information</button>

<div class="showstate" >

    <h1>

        South Carolina

    </h1>

    <p id="StateInfo">

        This is where the new information should show up!

    </p>

</div>