javascript - 我的数组中的值不会在 DOM 中呈现

标签 javascript jquery html arrays object

当我 console.log 时,该数组会显示出来,但是当我尝试其他任何操作(使用数组和键发出警报,或只是附加它)时,只会显示未定义的内容。在这种情况下,我的屏幕上实际显示的是:复选框未定义按钮

<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();
});

最佳答案

您的 toDoList 是一个 Array,您需要循环遍历其元素才能呈现您的待办事项列表:

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

希望这对您有帮助。

关于javascript - 我的数组中的值不会在 DOM 中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38535056/

相关文章:

javascript - Material-UI TableCell-root 中 padding-right 40px 是什么原因

javascript - 将函数应用于动态内容 javascript/jquery

html - 填充在我的 <ul> 上创建了奇怪的黑线

html - 如何 "de-align my TD' s”

javascript - 在 Chrome 应用程序中保存没有保存对话框的文件

javascript - 使用 Rails 加载页面时的 jQuery Mobile 弹出窗口

javascript - oTree/django 中的强制 slider

javascript - 当使用 Jquery UI 动画功能显示/隐藏子元素时,父 div 变得更宽而没有动画

jQuery .each 循环与简单的数学不给出单独的结果

html - 选中框时移动复选框标签