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

【问题标题】：Proper Function Syntax to change the text when you click a button单击按钮时更改文本的正确函数语法
【发布时间】：2020-02-05 03:17:46
【问题描述】：

我的导师在创建一个完全替换数组内对象中的段落和单词的函数的语法上让我们感到困惑。

她也没有解释换行符语法以及如何正确连接换行符字符串。

我在函数语法中做错了什么？

为什么我们使用函数而不是警报？

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>

【问题讨论】：

var button = document.getElementById("scinfo"); 是否存在于您的 html 中？
您到底想做什么？您只列出了一个按钮和一个状态。你想把它们都列出来吗？
你的英文不清楚。尝试使用某种翻译器或改用es.stackoverflow.com。此外，如果您正在处理多个文件，请将每个文件的内容分开，因为看起来您正在采购不存在的文件。
@zfrisch 我需要将文本更改为数组“eachstate”中第二个对象中的信息
你需要把它改成什么？

标签： javascript html arrays json function

【解决方案1】：

答案：

您的按钮的标识符为states，不是 scinfo
- 将按钮更改为document.getElementById("states") 不 document.getElementById("scinfo")，因为该ID不存在。
您需要使用正确的索引。
- 您指向数组 states.eachstate，但提供了查看 first 项的 zero( [0] ) 的索引。
- 南卡罗来纳州信息在second 项中，其索引为one。 ( [1] )
您需要提供与数据相关的大小写正确的property 名称。这些是区分大小写的
- states.eachstate[1].population 不一样与states.eachstate[1].Population
您需要提供正确的属性名称。
- 当您的数据中列为states.eachstate[0].StateBird 时，您使用states.eachstate[0].bird

示例：

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>

【讨论】：