javascript - Uncaught TypeError:无法在HTMLInputElement.updateData JSON Javasscript中设置未定义的属性“状态”

我有这段代码，在我添加最后一行之前，它似乎工作得很好。据我所知，最后一行也没有错误，但我不断出错

firstProjectDifferent_style.html?_ijt=gs7id9qc5jeql1hvnl2cgn56i4:38 Uncaught TypeError: Cannot set property 'status' of undefined
    at HTMLInputElement.updateData

下面是完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON Excercise</title>
</head>
<body>
    <h1>Learn JSON</h1>
    <div id="output">
        <ul id="taskList">

        </ul>
    </div>
    <script type="text/javascript">
        var data = '[{"info":"Cut Grass","status":false},{"info":"Clean Room","status":true},' +
            '{"info":"Go to Gyn","status":true},{"info":"Make Dinner Late","status":false}]';

        var dataJSON = JSON.parse(data);
        var output = document.getElementById("output");
        var taskList = document.querySelector("#taskList");
        for (var key in dataJSON){
            var status = dataJSON[key].status?"checked":"";
            var html = "<li>"+ dataJSON[key].info + "<input type='checkbox' value='" + dataJSON[key].info + "'" + status +"></li>";
            taskList.innerHTML += html
        }
        addEvent();

        function addEvent() {
            var checkBoxes = document.querySelectorAll("#taskList li input[type='checkbox']");
            for (var index in checkBoxes){
                checkBoxes[index].onchange = updateData;
            }
        }

        function updateData() {
            var key = event.target.value;
            console.log(key, event.target.checked);
            dataJSON[key].status = event.target.checked; //This line is causing the problem
        }



    </script>
</body>
</html>

最佳答案

您的第一个问题是这样的：

function updateData() {
    var key = event.target.value;

更改为（该参数为必需）：

function updateData(event) {
        var key = event.target.value;

其次，您不能访问像这样的对象数组：

dataJSON[key]

另一个问题是您的taskList：我将其分类为document.querySelector（'＃taskList'）

我建议使用.filter()。

工作代码可能是：

var data = '[{"info":"Cut Grass","status":false},{"info":"Clean Room","status":true},' +
        '{"info":"Go to Gyn","status":true},{"info":"Make Dinner Late","status":false}]';

var dataJSON = JSON.parse(data);
var output = document.getElementById("output");
var taskList = document.querySelector("#taskList");
for (var key in dataJSON){
    var status = dataJSON[key].status?"checked":"";
    var html = "<li>"+ dataJSON[key].info + "<input type='checkbox' value='" + dataJSON[key].info + "'" + status +"></li>";
    document.querySelector('#taskList').innerHTML += html;
}

addEvent();

function addEvent() {
    var checkBoxes = document.querySelectorAll("#taskList li input[type='checkbox']");
    for (var index in checkBoxes){
        checkBoxes[index].onchange = updateData;
    }
}

function updateData(event) {
    var key = event.target.value;
    dataJSON.filter(function(a, b) {
        return a.info == key;
    })[0].status = event.target.checked;
    console.log(key, event.target.checked);
}

<h1>Learn JSON</h1>
<div id="output">
    <ul id="taskList">

    </ul>
</div>

tasklist

javascript - Uncaught TypeError:无法在HTMLInputElement.updateData JSON Javasscript中设置未定义的属性“状态”