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

Question

i have problem with add value from input for checked checkboxes to list.I don't know how do to create new elements for suitable 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

This error occurs because you created only one <li> element and actually moved this element inside the loop between <ul> elements. You must create the <li> element for each separate <ul> element inside the loop and append it.

Example:

 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>