unaughtTypeError:如何解决无法在HTMLInputElement.updateData JSON Javasscript中设置未定义属性的“状态”?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (88)

有这个代码似乎完全正常,直到我添加最后一行。据我所知,最后一行也没有错,但不断收到错误

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')

工作代码可能是:

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>

扫码关注云+社区

领取腾讯云代金券