Изменение содержимого HTML из Javscript с данными из JSON - PullRequest
Новая
       14

Изменение содержимого HTML из Javscript с данными из JSON

0 голосов
/ 12 декабря 2018

Мой код ведет себя странно.Действительно, я создал свои данные в объекте JSON: 

injectJson = {
   "title": "Questions for a champion",
   "rules": [
      {
        "idChrono": "chrono-minute",
        "text": "Top is gone!",
        "tag": [
            {
                "id": "chronometer",
                "text": "countDown"
            }
        ]
     }
  ]
}

Вот мой HTML-код: 

<div id="rules">
   <h3>The game's rules!</h3>
</div>
<div id="begin">
   <a href="#" class="link">Begin</a>
</div>

А вот код Javascript, с помощью которого я внедряю код HTML: 

selectLinkBegin = document.getElementById("begin");
selectLinkBegin.firstElementChild.addEventListener("click", function(injectJson) {
    // Injection code
    selectRules = document.getElementById("rules");;
    selectRules.firstElementChild.innerText = injectJson.rules[0].texte;
});

На моем компьютере объект JSON и код JavaScript находятся в одном файле .js.Я загружаю свой скрипт в конце тега body.Когда я открываю свой код .html в браузере, консоль отображает:

Uncaught TypeError: Невозможно прочитать свойство '0' из неопределенного в HTMLAnchorElement.

Но когда яскопировав код Javascript в консоль, я получаю ожидаемый результат: текстовое содержимое h3 обновлено.

Демо: 

injectJson = {
  "title": "Questions for a champion",
  "rules": [{
    "idChrono": "chrono-minute",
    "text": "Top is gone!",
    "tag": [{
        "id": "chronometer",
        "text": "countDown"
      }

    ]
  }]
}


selectLinkBegin = document.getElementById("begin");
selectLinkBegin.firstElementChild.addEventListener("click", function(injectJson) {
  // Injection code
  selectRules = document.getElementById("rules");;
  selectRules.firstElementChild.innerText = injectJson.rules[0].texte;
});
<div id="rules">
  <h3>The game's rules!</h3>
</div>
<div id="begin">
  <a href="#" class="link">Begin</a>
</div>

Можете ли вы объяснить мне, что происходит?Как это исправить?Я уже очистил свой кеш, но он все тот же.

1 Ответ

0 голосов
/ 12 декабря 2018

Ваша проблема в том, что переменная injectJSON поднимается параметром в вашем function обратном вызове обработчика событий *1003*, поэтому она будет undefined, поэтому вы получили ошибку:

Uncaught TypeError: Невозможно прочитать свойство '0' undefined в HTMLAnchorElement.

Другими словами, параметр callback имеет то же имя, что и ваша переменная injectJson, так что это означает, что ваш оригиналinjectJson переменная будет undefined, как это было overridden по этому параметру.

Вы можете проверить секцию Переменный подъем здесь для дальнейшего чтения оthis.

Итак, вам нужно удалить параметр обратного вызова: 

selectLinkBegin.firstElementChild.addEventListener("click", function() {
  // Injection code
  selectRules = document.getElementById("rules");;
  selectRules.firstElementChild.innerText = injectJson.rules[0].text;
});

Примечание:

  • Убедитесь, чтополучить доступ к нужному элементу text вместо texte в injectJson.rules[0].texte.
  • Обязательно объявляйте переменные с ключевым словом var и избегайте использования существующего имени переменной, чтобы избежать таких проблем.

Демонстрация: 

var injectJson = {
  "title": "Questions for a champion",
  "rules": [{
    "idChrono": "chrono-minute",
    "text": "Top is gone!",
    "tag": [{
        "id": "chronometer",
        "text": "countDown"
      }

    ]
  }]
}


selectLinkBegin = document.getElementById("begin");
selectLinkBegin.firstElementChild.addEventListener("click", function() {
  // Injection code
  selectRules = document.getElementById("rules");;
  selectRules.firstElementChild.innerText = injectJson.rules[0].text;
});
<div id="rules">
  <h3>The game's rules!</h3>
</div>
<div id="begin">
  <a href="#" class="link">Begin</a>
</div>
...