I'm new here and if I make any mistakes I apologize. Currently I'm having a problem with my JS, the code runs correctly as a list but when I swap out the <ul> and the <li> tags to make it into an input and checkboxes, the input field is displayed but there isn't any checkboxes and the list disappears. My next step is to make the list change daily, based on the array but I can't even get the checkboxes to load first.
const dailyTasks = [
set0 = ['Take the trash out', 'Check dishwasher', 'Let Daki out', 'Check indeed', 'Check email'],
set1 = ['Check for milk', 'Check for coffee creamer'],
set2 = ['Make tea', 'Go to bed early'],
set3 = ['Apply for software jobs'],
set4 = ['Check schedule at work', 'Check bank account', 'Pay bills'],
set5 = ['Go to Chiropractor', 'Guild WvW night'],
set6 = ['Work on coding projects, like this one', 'Do things with NODE'],
set7 = ['Laundry', 'Movie night', 'Continue coding projects']
]
function makeDailyList(array) {
let list = document.createElement('ul');
for (let i = 0; i < array.length; i++) {
item.appendChild(document.createTextNode(array[i]));
list.appendChild(item);
}
return list;
}
document.getElementById("list").appendChild(makeDailyList(dailyTasks[0]));
makeDailyList(dailyTasks.set0);
/*
makeDailyList(dailyTasks.set1);
makeDailyList(dailyTasks.set3);
makeDailyList(dailyTasks.set4);
makeDailyList(dailyTasks.set5);
makeDailyList(dailyTasks.set6);
makeDailyList(dailyTasks.set7);
*/
The input array was syntactically wrong. If it's an array of arrays (aka 2D array), then the keys set1,...setN doesn't exist. Arrays do not have keys that are strings like "set1" -- arrays have real numbers for keys which are called indexes, starting at 0. Moreover if that array of arrays was an array of objects then those keys would be valid if they had colons: instead of =.
let wrong = [invalid = ['not', 'right'],...]
let correct = [['this', 'is', 'correct'],...]
In the function makeDailyList(array), none of the <li> were ever created and the <ul> was never appended to the DOM. Also, when rereferring to one of the sub-arrays of dailyTasks use the index bracket notation:
// Get the 4th sub-array
let fourth = dailyTasks[3]
// Remember, arrays start at 0 index
// So the fourth sub-array at index 3 is: ['Apply for software jobs']
const dailyTasks = [
['Take the trash out', 'Check dishwasher', 'Let Daki out', 'Check indeed', 'Check email'],
['Check for milk', 'Check for coffee creamer'],
['Make tea', 'Go to bed early'],
['Apply for software jobs'],
['Check schedule at work', 'Check bank account', 'Pay bills'],
['Go to Chiropractor', 'Guild WvW night'],
['Work on coding projects, like this one', 'Do things with NODE'],
['Laundry', 'Movie night', 'Continue coding projects']
]
function makeDailyList(array) {
let list = document.createElement('ul');
for (let i = 0; i < array.length; i++) {
let item = document.createElement('li');
let chx = document.createElement('input');
chx.setAttribute('type', 'checkbox');
item.append(chx);
item.appendChild(document.createTextNode(array[i]));
list.appendChild(item);
/* comment out the next line if you want the list to be elsewhere */
document.body.append(list);
} /* uncomment the next line if you want to add theb list somewhere else. */
// return list;
}
/* Comment this line if you want to add the list elsewhere */
makeDailyList(dailyTasks[4]);
/* Uncomment the next lines if you want the list added elsewhere */
// const list = makeDailyList(dailyTasks[4]);
// document.querySelector('fieldset').append(list);
<fieldset></fieldset>
BTW, in the question you mentioned that you got it working except for checkboxes:
<input> at all. Please add that part of the code as well since I have no idea where you want checkboxes. I probably assume that the checkboxes should be added to each <li>. I also expect text and maybe some additional elements that are probably not needed.