无法获取要在 HTML 中显示的输入值
[英]Can't get the input value to display in the HTML
问题描述
Extremely new to Javascript and trying to create a basic todo list using an array. 
Javascript 非常新，并尝试使用数组创建基本的待办事项列表。 I feel like I'm on the right track because my add button is creating a new li onclick, but its not displaying the value of the input field.我觉得我在正确的轨道上，因为我的添加按钮正在创建一个新的 li onclick，但它没有显示输入字段的值。 I've played around with several different things, but it seems like I've hit a wall.我玩过几种不同的东西，但似乎我碰壁了。 I'm not sure where to go from here.我不确定 go 从这里到哪里。
let addButton = document.getElementById('add-button'); addButton.addEventListener('click', add); let addInput = document.getElementById('add-input'); let removeButton = document.getElementById('remove-button'); removeButton.addEventListener('click', remove); let todo = [] function add() { let todoInput = addInput.value; todo.push(todoInput); displayTodo(); } function remove() {} function displayTodo() { let todosUl = document.getElementById('todos-ul'); todosUl.innerHTML = ''; for (let i = 0; i < todo.length; i++) { let todoLi = document.createElement('li'); todosUl.appendChild(todoLi); } }
<input id="add-input"> <button id="add-button">Add</button> <button id="remove-button">Remove</button> <ul id="todos-ul"></ul>
4 个解决方案
解决方案1
1 2021-05-21 02:13:57
You're not displaying the data to your "li".您没有向“li”显示数据。 You just simply created the element.您只是简单地创建了元素。 Maybe you need to use "innerHTML" to the newly created "todoLi".也许您需要对新创建的“todoLi”使用“innerHTML”。 Eg (todoLi.innerHTML = todo[i]).例如（todoLi.innerHTML = todo[i]）。
This is supposed to be a comment, but still can't comment bcoz of the reputation.这应该是评论，但仍然无法评论声誉。
解决方案2
1 2021-05-21 02:15:13
You should insert text to list.您应该将文本插入列表。
todoLi.innerHTML=todo[i];
let addButton = document.getElementById('add-button'); addButton.addEventListener('click', add); let addInput = document.getElementById('add-input'); let removeButton = document.getElementById('remove-button'); removeButton.addEventListener('click', remove); let todo = [ ] function add() { let todoInput = addInput.value; todo.push(todoInput); addInput.value = ""; displayTodo(); } function remove() { } function displayTodo() { let todosUl = document.getElementById('todos-ul'); todosUl.innerHTML = ''; for (let i = 0; i < todo.length; i++) { let todoLi = document.createElement('li'); todoLi.innerHTML=todo[i]; //insert this code todosUl.appendChild(todoLi); } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link ref="stylesheet" href="style.css"> <title>Todo List</title> </head> <body> <input type="text" id="add-input"> <button id="add-button">Add</button> <button id="remove-button">Remove</button> <ul id="todos-ul"> </ul> <script src=main.js></script> </body> </html>
解决方案3
1 2021-05-21 02:18:49
You should add todo[] in todoLi with innerHTML您应该使用 innerHTML 在 todoLi 中添加 todo[]
let addButton = document.getElementById('add-button'); addButton.addEventListener('click', add); let addInput = document.getElementById('add-input'); let removeButton = document.getElementById('remove-button'); removeButton.addEventListener('click', remove); let todo = [] function add() { let todoInput = addInput.value; todo.push(todoInput); displayTodo(); } function remove() { } function displayTodo() { let todosUl = document.getElementById('todos-ul'); todosUl.innerHTML = ''; for (let i = 0; i < todo.length; i++) { let todoLi = document.createElement('li'); todoLi.innerHTML = todo[i]; todosUl.appendChild(todoLi); } }
解决方案4
0 2021-05-21 12:57:35
Oh Dear, Nothing wrong in your code!哦，亲爱的，您的代码没有错！ you just miss one line of code你只是错过了一行代码
todoLi.innerHTML = todo[i];
this is new displayTodo function copy and paste this and check it will work这是新的 displayTodo function 复制并粘贴它并检查它是否有效
function displayTodo() {
let todosUl = document.getElementById('todos-ul');
todosUl.innerHTML = '';
for (let i = 0; i < todo.length; i++) {
let todoLi = document.createElement('li');
todoLi.innerHTML = todo[i];
todosUl.appendChild(todoLi);
}
}
previously your code is appending only li tag inside the ul but not adding any text inside that now this problem is solved以前您的代码仅在 ul 中附加 li 标记，但未在其中添加任何文本，现在此问题已解决
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.