Question

我正在尝试将div元素中的文本更改为单击按钮时从json文件获得的文本字符串。

我正在从json文件中读取信息，并将其声明为数据。然后，我想运行一个功能，该功能在单击页面上的按钮时将其激活，以将文本更改为按钮ID对应的索引。

json文件只有一个“事件”数组，每个对象都有一个“名称”和“文本”。这个名字无关紧要，只有我才可以分辨每个人的真实身份。

html文件中的每个按钮都有一个单独的ID，该ID从1开始，并且每个按钮都向上（没有id 0按钮，因为我在json中将数组中的第一个对象作为测试对象进行了测试，但没有任何价值），并且它们还有一个onclick事件，可触发changeText（）函数。

所以我的目标是检查所单击按钮的ID，然后从json中获取“文本”字符串，并将text-area div元素的innerHTML更改为该文本。

这是js代码：

function loadData() {
    fetch('../text/events.json')
        .then(info => {
            return info.json();
        })
        .then(data => {
            console.log(data);
            return data;
        })
        .then(
            data => {
                var txt = document.getElementById("text-area");
                var btnID = this.id;

                txt.innerHTML = data.events[btnID].text;
            }
        )
}

以下是我正在使用的按钮之一的示例： <button class="tl-btn btn-right" onclick="loadData()" id="2" style="margin-top: 10px">test1</button>

这是json文件：

{
    "events": [
        {
            "name": "test-name",
            "text": "test-text"
        },
        {
            "name": "test-name1",
            "text": "test-text1"
        },
        {
            "name": "test-name2",
            "text": "test-text2"
        }
    ]
}

我不断得到：未捕获的TypeError：无法读取未定义的属性“事件” 在changeText（main.js：18）在HTMLButtonElement.onclick（index.html：21）

老实说，我不确定是什么问题。由于控制台会显示从中获取的记录数据，因此json文件的读取效果非常好。

如果真的让我感到困惑，我感到非常抱歉，请随时问我任何不清楚的地方，我期待任何帮助。

谢谢！：D

编辑1 ：我根据以下建议更改了一些代码，但现在出现了另一个错误：未捕获（承诺）TypeError：无法读取未定义的属性“文本”

编辑2 ：我发现代码存在问题，因为它无法读取json的格式，所以我只需要这样解析：

.then(data => {
        var txt = document.getElementById("text-area");

        txt.innerHTML = JSON.stringify(data.events[0].text).slice(1,-1)
    })

切片会清除引号。

Answer 1

您需要将null和以下数据一起移入回调：

changeText

如何在外部函数中使用在另一个函数中声明的变量？

1 个答案: