如何从输入中添加值以将选中的复选框列出？

Question

我在从选中的复选框到列表的输入中添加值时遇到问题。我不知道如何为合适的ul创建新元素。

 document.addEventListener("DOMContentLoaded", function() { var checkboxDays = document.querySelectorAll('.checkboxDay'); var allDays = document.querySelector('.allDays'); var noteText = document.querySelector('.note-text') var form = document.querySelector('form'); var btn = document.querySelector('.button'); var dayBoxes = document.querySelectorAll('.dayBox ul'); btn.addEventListener('click', function() { var dataItem = noteText.value; var li = document.createElement('li'); li.innerText = dataItem; for (var i = 0; i < checkboxDays.length; i++) { if (checkboxDays[i].checked) { dayBoxes[i].appendChild(li); } } }); }); 

 <form class="input-form"> <div class='note-cnt'> <input type="text" class="note-text" placeholder="Add your note"></input> </div> <div class="checkbox-cnt"> <h2>Check Day/s</h2> <label>Monday</label><input type="checkbox" class="checkboxDay" /> <label>Tuesday</label><input type="checkbox" class="checkboxDay" /> <label>Wednesday</label><input type="checkbox" class="checkboxDay" /> <label>Thursday</label><input type="checkbox" class="checkboxDay" /> <label>Friday</label><input type="checkbox" class="checkboxDay" /> <label>Saturday</label><input type="checkbox" class="checkboxDay" /> <label>Sunday</label><input type="checkbox" class="checkboxDay" /> <label>AllDays</label><input type="checkbox" class="allDays" /> </div> <button class="button" type="button"> <span>Add item</span> </button> </form> </section> <div class="allBox"> <div class="dayBox"> <h3>Monday</h3> <ul class="monday"></ul> </div> <div class="dayBox"> <h3>Tuesday</h3> <ul class="tuesday"></ul> </div> <div class="dayBox"> <h3>Wednesday</h3> <ul class="wednesday"></ul> </div> <div class="dayBox"> <h3>Thursday</h3> <ul class="thursday"></ul> </div> <div class="dayBox"> <h3>Friday</h3> <ul class="friday"></ul> </div> <div class="dayBox"> <h3>Saturday</h3> <ul class="saturday"></ul> </div> <div class="dayBox"> <h3>Sunday</h3> <ul class="sunday"></ul> </div> </div> 

Answer 1

发生此错误的原因是，您仅创建了一个<li>元素，并且实际上将该元素移到了<ul>元素之间的循环内。 您必须为循环内的每个单独的<ul>元素创建<li>元素并将其附加。

例：

 document.addEventListener( 'DOMContentLoaded', function () { var checkboxDays = document.querySelectorAll( '.checkboxDay' ), allDays = document.querySelector( '.allDays' ), noteText = document.querySelector( '.note-text' ), form = document.querySelector( 'form' ), btn = document.querySelector( '.button' ), dayBoxes = document.querySelectorAll( '.dayBox ul' ); btn.addEventListener( 'click', function () { var dataItem = noteText.value; for ( var i = 0; i < checkboxDays.length; i++ ) { if ( checkboxDays[ i ].checked ) { var li = document.createElement( 'li' ); li.innerText = dataItem; dayBoxes[ i ].appendChild( li ); } } } ) allDays.addEventListener( 'click', function () { for ( var i = 0; i < checkboxDays.length; i++ ) { checkboxDays[ i ].checked = allDays.checked ? true : false } } ) } ) 

 h3, ul { margin: 0 } 

 <form class="input-form"> <h2>Check Day/s:</h2> <div class='note-cnt'> <input type="text" class="note-text" placeholder="Add your note"> <button class="button" type="button">Add item</button> </div> <div class="checkbox-cnt"> <label>Monday</label><input type="checkbox" class="checkboxDay" /> <label>Tuesday</label><input type="checkbox" class="checkboxDay" /> <label>Wednesday</label><input type="checkbox" class="checkboxDay" /> <label>Thursday</label><input type="checkbox" class="checkboxDay" /> <label>Friday</label><input type="checkbox" class="checkboxDay" /> <label>Saturday</label><input type="checkbox" class="checkboxDay" /> <label>Sunday</label><input type="checkbox" class="checkboxDay" /> <label>AllDays</label><input type="checkbox" class="allDays" /> </div> </form> <br> <div class="allBox"> <div class="dayBox"> <h3>Monday</h3> <ul class="monday"></ul> </div> <div class="dayBox"> <h3>Tuesday</h3> <ul class="tuesday"></ul> </div> <div class="dayBox"> <h3>Wednesday</h3> <ul class="wednesday"></ul> </div> <div class="dayBox"> <h3>Thursday</h3> <ul class="thursday"></ul> </div> <div class="dayBox"> <h3>Friday</h3> <ul class="friday"></ul> </div> <div class="dayBox"> <h3>Saturday</h3> <ul class="saturday"></ul> </div> <div class="dayBox"> <h3>Sunday</h3> <ul class="sunday"></ul> </div> </div>