[英]How can I insert elements in an array to a HTML document using Javascript?
我正在尝试添加一个名为“taskList”的列表的元素，该列表由我从输入元素中获得的值组成。
谁能帮帮我，我不明白为什么列表中的元素没有显示出来。
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>
我尝试检查了几次，但 HTML 文档中没有任何更新
您不应该追加到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>
主要错误是使用.getElementsByClassName就像它只是一个元素而不是列表（不要忽略元素中的s 。）。
无论如何，我稍微重构了您的代码，以便为每个目标制定更好的策略，并实现了清除任务列表的逻辑。
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>
您只需要在任务列表中使用一个 ID。
getElementsByClassName 需要一个索引，使您的问题成为querySelectorAll 和 getElementsBy* 方法返回什么？ :
document.getElementsByClassName('taskLists')[0].innerHTML
也就是说，这是使用推荐的 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>
如何在没有document.getElementById限制的情况下使用javascript将链接插入HTML
[英]How can I insert links into HTML using javascript without the limitations of document.getElementById
如何使用 javascript 获取 HTML 文档的唯一可见区域元素？
[英]How can I get the only visible area elements of the HTML document using javascript?
如何使用 JavaScript 插入以 pug 语法编写的 html 元素？
[英]How can I insert html elements written in the pug syntax using JavaScript?
如何在JavaScript中使用SQL将具有5个元素的数组插入数据库表？
[英]How can i insert an array with 5 elements to db table using SQL in javascript?
如何使用 javascript/jquery 将数组值写入 html 文档中的不同段落？
[英]How can I write an array values to different paragraphs in a html document using javascript/jquery?
我可以使用Javascript中的数组更改许多HTML元素吗？
[英]Can I change numerous HTML elements using an array in Javascript?
如何使用HTML，JavaScript和Laravel插入2个动作？
[英]How can i insert 2 actions using HTML, JavaScript and Laravel?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.