Question

html 文件：

<p>Click the button below, to load the speaker bio details</p>
<button id="loadLess">Load Prev name</button>
<button id="loadMore">Load Next Name</button>
<div id="update"></div>
<script src="index.js"></script>

js文件

let i = 0;

document.getElementById("loadMore").addEventListener("click", changeColor(json));

function changeColor(json) {
    // window.alert(evt.currentTarget.myParam);
    console.log("this");
    console.log("thist" + json[1].name);
    i = i + 1
    document.getElementById('update').innerText = json[1].name;
}

document.getElementById("loadLess").addEventListener("click", changeKolor(json));

function changeKolor(json) {
    i = i - 1;
    // window.alert(evt.currentTarget.myParam);
    document.getElementById('update').innerText = json[1].name;
}

window.onload = function () {
    fetch("data.json")
        .then(response => response.json())
        .then(json => console.log(json));


};

json 文件

[
  {
    "name":"Barot Bellingham name1",
    "shortname":"Barot_Bellingham",
  },
  {
    "name": "2222 name2",
    "shortname": "2",

  },

  {
    "name": "33 name3",
    "shortname": "33",

  }
]

这绝对是一个 DOM 错误，我无法修复。我可以读取 JSON，但无法将其写入 HTML DOM。如果用户点击下一个按钮，它应该跳转到下一个名字，如果点击前一个名字，它应该跳转到下一个名字，依此类推。

Answer 1

存在多个问题。

addEventListener

addEventListener 将事件绑定到函数。你实现它的方式，你已经执行了 changeColor(json) 来定义那个函数，这将不起作用。

使用这个：

  document.getElementById("loadMore").addEventListener("click", function() { changeColor(json); });
  
  ...
  
  document.getElementById("loadLess").addEventListener("click", function() { changeKolor(json);} );

错误的索引

在 changeColor(...) 和 changeKolor(...) 中，您不使用当前索引，而是始终使用 1。将 json[1] 更改为 json[i] 以解决该问题。

Answer 2

我修复了它，但我仍然收到那个错误：

index.js:21 Uncaught ReferenceError: json is not defined.

.then(json => console.log(json)); 将 json 数组正确写出到控制台。

我设法读取了 json 文件，但无法传递给 changeColor(json); 函数。 这绝对是因为加载或类似的东西。

window.onload = function() {
  fetch("data.json")
    .then(response => response.json())
    .then(json => console.log(json));



};

document.getElementById("loadLess").addEventListener("click", function() {
  changeColor(json);
});

function changeColor(json) {
  // window.alert(evt.currentTarget.myParam);
  console.log("ez");
  console.log("ezaz" + json[1].name);
  document.getElementById('update').innerText = "aaa";
}

document.getElementById("loadMore").addEventListener("click", function() {
  changeKolor(json);
});

function changeKolor(json) {
  // window.alert(evt.currentTarget.myParam);
  document.getElementById('update').innerText = "less";
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

  <p>Click the button below, to load the speaker bio details</p>
  <button id="loadLess">Load Lesser</button>
  <button id="loadMore">Load Morer</button>
  <div id="update"></div>
  <script src="index.js"></script>
</body>

</html>

如何读取json文件并在单击按钮后写入DOM？

2 个答案: