我正在尝试创建一个待办事项列表，其中包含使用javascript呈现的html元素。
想法是，当单击按钮时，将出现一个带有复选框的文本输入字段，用户将键入他们的待办事项，然后在浏览器中显示为清单项。
我几乎在那里，除了在输入字段中输入文本外，它不会显示为清单项目，而是显示为变量（特别是$ {todo.text}）]
请在下面查看我的代码。任何帮助表示赞赏。
Javascript
const classNames = {
TODO_ITEM: 'todo-container',
TODO_CHECKBOX: 'todo-checkbox',
TODO_TEXT: 'todo-text',
TODO_DELETE: 'todo-delete',
}
var listItem = document.querySelector('.todo-item')
newTodoBtn = document.getElementById('newTodoButton')
function newTodo(text) {
const todo = {
text,
checked: false,
id: Date.now(),
};
todoItems.push(todo);
const list = document.querySelector('.todolist')
var addform = document.createElement("form")
addform.classList.add("todo-form")
const form = document.querySelector('.todo-form');
listItem = document.createElement('li');//li
var itemtext = document.createElement("span");
var itemvalue = document.createTextNode("${todo.text}");
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = 0;
checkbox.name = "todo[]";
checkbox.id = "${todo.id}";
var textbox = document.createElement('input');
textbox.type = "text";
textbox.classList.add("todo-input");
form.addEventListener('submit', event => {
itemtext.appendChild(itemvalue)
event.preventDefault()
const input = document.querySelector('.todo-input')
const text = input.value.trim();
if (text !== '') {
newTodo(text);
input.value = '';
input.focus();
}
});
};
HTML
<html>
<head>
<title>TODO App</title>
<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
<div class="container center">
<h1 class="center title">My TODO App</h1>
<button onclick ="newTodo()" id="newTodoButton" class="button center">New TODO</button>
<ul id="todo-list" class="todolist">
</ul>
<form class="todo-form">
</form>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
html, body {
background-color: #eee;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
span:hover {
cursor: pointer;
}
li:hover {
border: 1px solid hotpink;
}
li {
padding: 5px;
}
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px hotpink;
}
.center {
align-self: center;
}
.flow-right {
display: flex;
justify-content: space-around;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 10px;
display: flex;
flex-direction: column;
background-color: white;
height: 100vh;
}
.title, .controls, .button {
flex: none;
}
.button {
padding: 10px 20px;
}
.todo-list {
flex: 1 1 0;
margin-top: 20px;
padding: 20px;
overflow-y: auto;
}
.todo-delete {
margin: 10px;
}
.todo-checkbox {
margin: 10px;
}
.todo-container {
padding: 20px;
border-bottom: 1px solid #333;
}
.todo-container:first-of-type {
border-top: 1px solid #333;
}
尝试这个
var itemvalue = document.createTextNode(`${todo.text}`);