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。 如果用户点击下一个按钮,它应该跳转到下一个名字,如果点击前一个名字,它应该跳转到下一个名字,依此类推。
答案 0 :(得分:0)
存在多个问题。
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]
以解决该问题。
答案 1 :(得分:0)
我修复了它,但我仍然收到那个错误:
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>