Правильный синтаксис функции для изменения текста при нажатии кнопки

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
  • , измените кнопку на document.getElementById("states") не document.getElementById("scinfo"), поскольку этот идентификатор не существует .
• Вам необходимо использовать правильный index .
  • Вы указываете на массив states.eachstate, но предоставляете индекс zero ([0]), который смотрит на элемент first .
  • Информация о Южной Каролине содержится в элементе second , индекс которого one . ([1])
• Необходимо указать правильные регистры property имен, которые соответствуют данным . Это с учетом регистра
  • states.eachstate[1].population не совпадает с states.eachstate[1].Population
• Вам необходимо предоставить правильное имя свойства.
  • Вы используете states.eachstate[0].bird, когда в ваших данных он указан как 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>