Question

我的代码行为异常。确实，我在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>

这是我用来注入HTML代码的Javascript代码：

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代码时，控制台显示：

未捕获的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>

您能告诉我发生了什么吗？如何补救？我已经清空了缓存，但还是一样。

Answer 1

您的问题是injectJSON事件处理程序回调click中的参数正在挂起变量function，因此undefined就是为什么错误：

未捕获的TypeError：无法读取HTMLAnchorElement上未定义的属性“ 0”。

换句话说，callback参数与您的injectJson变量具有相同的名称，这意味着您原来的injectJson变量将是undefined，就像{{ 1}}就是这个参数。

您可以检查the Variable Hoisting section here以获得进一步的了解。

所以您需要做的是删除回调参数：

overridden

注意：

确保访问右侧的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;
});

使用JSON中的数据更改Javscript中的HTML内容

1 个答案: