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

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,不&nbsp;scinfo将 button 更改为document.getElementById("states")&nbsp;not&nbsp;document.getElementById("scinfo")，因为该 ID不存在。您需要使用正确的索引。您指向数组，states.eachstate但提供了查看第一项的零( [0] )索引。南卡罗来纳州信息位于第二项中，其索引为1。( [1] )您需要提供property与数据相关的大小写正确的名称。这些是区分大小写的states.eachstate[1].population&nbsp;是不一样的states.eachstate[1].Population您需要提供正确的属性名称。您使用states.eachstate[0].birdwhen 在您的数据中列为states.eachstate[0].StateBird例子：var button = document.getElementById("states");var states = {&nbsp; &nbsp; "eachstate": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "Name":"North Carolina",&nbsp; &nbsp; &nbsp; &nbsp; "Capital": "Raleigh",&nbsp; &nbsp; &nbsp; &nbsp; "Population": "986,000",&nbsp; &nbsp; &nbsp; &nbsp; "StateBird": "Who Cares"&nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "Name": "South Carolina",&nbsp; &nbsp; &nbsp; &nbsp; "Capital": "Columbia",&nbsp; &nbsp; &nbsp; &nbsp; "Population": "886,000",&nbsp; &nbsp; &nbsp; &nbsp; "StateBird": "Hawk"&nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "Name": "Florida",&nbsp; &nbsp; &nbsp; &nbsp; "Capital": "Tallahasee",&nbsp; &nbsp; &nbsp; &nbsp; "Population": "975,000",&nbsp; &nbsp; &nbsp; &nbsp; "StateBird": "Flamingo"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ]};button.addEventListener("click", writestates, false);function writestates(){&nbsp; &nbsp; document.getElementById("StateInfo").innerHTML = "<p>Name: " + states.eachstate[1].Name + "</p>" + "<p>" + "Capital: "&nbsp; &nbsp; &nbsp; &nbsp; + states.eachstate[1].Capital + "</p>" + "<p>" + "Bird: " + states.eachstate[1].StateBird + "</p>" + "<p>" + "Population: " +&nbsp; &nbsp; &nbsp; &nbsp; states.eachstate[1].Population + "</p>"}<button id="states" type="button">SC Information</button><div class="showstate" >&nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; &nbsp; South Carolina&nbsp; &nbsp; </h1>&nbsp; &nbsp; <p id="StateInfo">&nbsp; &nbsp; &nbsp; &nbsp; This is where the new information should show up!&nbsp; &nbsp; </p></div>