[英]How to add a value from input and a created element with JS to the list?
我正在JavaScript ES5中建立一個列表,它說“節點”不能是這個或那個。
好吧,這是我第一次真正的冒險之旅。 但是我不確定該如何解決,也不確定控制台中“節點”的內容。 我嘗試了node.appendChild,appendNode等...幾乎可以想到的所有東西。
這是代碼的CodePen: https ://codepen.io/Aurelian/pen/ypKxwL?editors = 1010
JS:
window.onload = function() {
///////////////////
//Variables
///////////////////
// Variables
var newTaskInput = document.querySelector('#new-task');
var addTaskButton = document.querySelector('#add-task');
var incompleteTasks = document.querySelector('#incomplete-tasks');
//var completeTasks = document.querySelector('#complete-tasks');
function createNewTaskElement(userValue) {
var listItem = document.createElement('li');
var label = document.createElement('label');
var editInput = document.createElement('input');
var editButton = document.createElement('button');
var deleteButton = document.createElement('button');
label.innerHTML = userValue;
editInput.type = "text";
editButton.className = "edit";
deleteButton.className = "delete";
// Insert that to the li
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;;
}
// Function
function addNewTask() {
incompleteTasks.push(createNewTaskElement);
}
//function deleteTask () {
// this.pop;
//}
//Events
addTaskButton.addEventListener('click', addNewTask);
}
HTML:
<div class="container">
<div class="">
<label for="new-task">Add Item</label>
<input id="new-task" type="text">
<button id="add-task">Add</button>
</div>
<div>
<h3>Todo List</h3>
<ul id="incomplete-tasks">
<li>
<label>Pay Bills</label>
<input type="text">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li>
</ul>
</div>
</div>
您沒有將createNewTaskElement
調用為函數,並且incompleteTasks
並非是其DOM對象的數組,因此沒有push
方法可用。
incompleteTasks.push(createNewTaskElement);
應該
incompleteTasks.appendChild(createNewTaskElement());
在codepen中找到更新后的代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.