使用 JSON 中的数据更改 Javascript 中的 Html 内容

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

Uncaught TypeError: Cannot read property '0' of undefined at 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 这就是你的原因收到错误：

Uncaught TypeError: Cannot read property '0' of undefined at HTMLAnchorElement.

换句话说，callback 参数与您的 injectJson 变量同名，这意味着您原来的 injectJson 变量将是 undefined，因为它是overridden 通过这个参数。

您可以查看 the Variable Hoisting section here 进一步阅读。

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

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>

使用 JSON 中的数据更改 Javascript 中的 Html 内容

Changing Html content from Javascript with data from JSON

html

javascript

variables

json

undefined