如何使用 Javascript 将数组中的元素插入到 HTML 文档中？
[英]How can I insert elements in an array to a HTML document using Javascript?
问题描述
I am trying to add the elements of a list called "taskList" made up of values I get from the input elements.
我正在尝试添加一个名为“taskList”的列表的元素，该列表由我从输入元素中获得的值组成。
Can anyone please help me, I don't understand why the elements from the list are not showing.谁能帮帮我，我不明白为什么列表中的元素没有显示出来。
var taskList = []; var input = document.getElementById('takeInput'); var button = document.getElementById('addInput'); button.onclick = function(){ var nHTML = ''; var userEnteredText = input.value; taskList.push(userEnteredText); taskList.forEach(function(task){ nHTML += '<li>'+task+'</li>'; }); document.getElementsByClassName('taskLists').innerHTML = '<ul>' + nHTML + '</ul>'; }
<div class="wrapper"> <header>To-Do List</header> <div class="taskAdder"> <input id="takeInput" type="text" placeholder="Add your new To-Do"> <button id="addInput" class="button" type="button" >➕</button> </div> <div class="taskLists"> </div> <div class="footer"> <span> You have <span class="pendingTasks"></span> tasks left </span> <button type="button" class="button">Clear All</button> </div> </div>
I tried checking several times but nothing is updating in the HTML document我尝试检查了几次，但 HTML 文档中没有任何更新
3 个解决方案
解决方案1
0 2022-12-23 14:30:36
You shouldn't append to innerHTML , instead, use createElement to make the li , then set innerHTML of that new element to input.value and use appendChild to append it to the list您不应该追加到innerHTML ，而是使用createElement制作li ，然后将该新元素的innerHTML设置为input.value并使用appendChild将其追加到列表
var input = document.getElementById('takeInput'); var button = document.getElementById('addInput'); var tlist = document.getElementsByClassName('taskLists')[0]; button.onclick = function(){ let e = document.createElement('li'); e.innerHTML = input.value tlist.appendChild(e) // Optionally, clear the input field to prevent double adding the same task input.value = ''; }
<div class="wrapper"> <header>To-Do List</header> <div class="taskAdder"> <input id="takeInput" type="text" placeholder="Add your new To-Do"> <button id="addInput" class="button" type="button" >➕</button> </div> <div class="taskLists"> </div> <div class="footer"> <span> You have <span class="pendingTasks"></span> tasks left </span> <button type="button" class="button">Clear All</button> </div> </div>
解决方案2
0 2022-12-23 14:35:11
The main mistake was using .getElementsByClassName like it was one element only and not a list (don't ignore the s in elements.).主要错误是使用.getElementsByClassName就像它只是一个元素而不是列表（不要忽略元素中的s 。）。
Anyway I slightly refactored your code to have better strategies for each of its goals and implemented also the logic for clearing the tasks list.无论如何，我稍微重构了您的代码，以便为每个目标制定更好的策略，并实现了清除任务列表的逻辑。
var taskList = []; var input = document.getElementById('takeInput'); var buttonAdd = document.getElementById('addInput'); var buttonClear = document.getElementById('clearInput'); var tasksList = document.getElementById('tasksList'); buttonAdd.addEventListener('click', (event)=>{ addTask(input.value); }); buttonClear.addEventListener('click', (event)=>{ tasksList = []; document.querySelector('#tasksList ul').remove(); }); function addTask(value){ if(taskList.length == 0){ document.getElementById('tasksList').append( document.createElement('ul') ); } taskList.push(value); const newLI = document.createElement('li'); newLI.innerText = value; document.querySelector('#tasksList ul').append(newLI); }
<body> <div class="wrapper"> <header>To-Do List</header> <div class="taskAdder"> <input id="takeInput" type="text" placeholder="Add your new To-Do"> <button id="addInput" class="button" type="button">➕</button> </div> <div id="tasksList"> </div> <div class="footer"> <span> You have <span class="pendingTasks"></span> tasks left </span> <button id="clearInput" type="button" class="button">Clear All</button> </div> </div> </body>
解决方案3
0 2022-12-23 14:35:23
you just needed to use an ID on the tasklist.您只需要在任务列表中使用一个 ID。
getElementsByClassName needs an index, making your question a dupe of What do querySelectorAll and getElementsBy* methods return? getElementsByClassName 需要一个索引，使您的问题成为querySelectorAll 和 getElementsBy* 方法返回什么？ : :
document.getElementsByClassName('taskLists')[0].innerHTML
That said, here is a full version using recommended eventListener and IDs where relevant.也就是说，这是使用推荐的 eventListener 和相关 ID 的完整版本。
let tasks = []; const taskList = document.getElementById('taskLists') const input = document.getElementById('takeInput'); const add = document.getElementById('addInput'); const pendingTasks = document.getElementById('pendingTasks'); const clear = document.getElementById('clear'); const showTasks = () => { taskList.innerHTML = `<ul>${tasks.map(task => `<li>${task}</li>`).join('')}</ul>`; pendingTasks.textContent = `${tasks.length} task${tasks.length?= 1: "s"; ""}`; }. add,addEventListener('click'. () => { var userEnteredText = input;value. tasks;push(userEnteredText); showTasks(); }). clear,addEventListener('click'; () => { tasks = []; showTasks(); }). taskList,addEventListener('click'. (e) => { const tgt = e.target;closest('li'); if (.tgt) return; // not a task const task = tgt.textContent. tgt;remove() tasks = tasks;filter(currentTask => currentTask;= task); // remove from list showTasks() }); showTasks(); //init
<div class="wrapper"> <header>To-Do List</header> <div class="taskAdder"> <input id="takeInput" type="text" placeholder="Add your new To-Do"> <button id="addInput" class="button" type="button">➕</button> </div> <div id="taskLists"></div> <div class="footer"> <span> You have <span id="pendingTasks"></span> left </span> <button type="button" id="clear">Clear All</button> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.