我的数组中的值不会在 DOM 中呈现答案

【问题标题】：The values in my array will not render in the DOM我的数组中的值不会在 DOM 中呈现
【发布时间】：2016-07-22 20:52:59
【问题描述】：

当我对它进行控制台记录时，该数组会显示出来，但是当我尝试其他任何操作（使用数组和键发出警报，或者只是附加它）时，只会显示未定义。在这种情况下，我的屏幕上实际显示的是：checkbox undefined button

<body>
<input id="text-field-input" type="text" placeholder="what do you have to do?"/>
<button id="submit">submit</button>
<ul id="list-section">
</ul>

var toDoList = [];

function addInputToList(todoinput, checkchecked) {
    toDoList.push({todo : todoinput, checked : checkchecked});
};

function renderToDos() {
    $('#list-section').append('<input type="checkbox">' + toDoList.todo + ' ' + '<button>x</button>');
};

$('#submit').on('click', function() {
    var textFieldInput = $('#text-field-input').val().toLowerCase();

    addInputToList(textFieldInput, false);
    renderToDos();
});

【问题讨论】：

标签： javascript jquery html arrays object

【解决方案1】：

你的toDoList 是一个Array，你需要遍历它的元素来渲染你的待办事项列表：

function renderToDos() {
    for(var i = 0; i < toDoList.length; i++) {
        $('#list-section').append('<input type="checkbox">' + toDoList[i].todo + ' ' + '<button>x</button>');
    }
};

希望对你有所帮助。

【讨论】：

【解决方案2】：

在您的代码中，您尝试访问不具有此类属性的数组上的对象属性（即待办事项）。这就是你变得不确定的原因。

也许你想实现这个 -

var toDoList = [];

function addInputToList(todoinput, checkchecked) {
    toDoList.push({todo : todoinput, checked : checkchecked});
};

function renderToDos() {
  var count = toDoList.length;
  if(count > 0){
    var addedTodo = toDoList[count-1]
       $('#list-section').append('<input type="checkbox">' + addedTodo.todo + ' ' + '<button>x</button>');
    }
 
};

$('#submit').on('click', function() {
    var textFieldInput = $('#text-field-input').val().toLowerCase();

    addInputToList(textFieldInput, false);
    renderToDos();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input id="text-field-input" type="text" placeholder="what do you have to do?"/>
<button id="submit">submit</button>
<ul id="list-section">
</ul>

【讨论】：