This creates an object called appointment and defines some properties for it – including a function to output the tr/td row data.
The addAppointment() function creates a new instance of this object, populates it with the new data and updates the innerHTML of the “tbody” element with the rowData() value.
Problem :
So as shown below, in the console it gives my all the data that has been entered, however it will not display as a new row. If i move the second function/for loop into the first, it only displays each value as undefined, which seems like progress. Why? and how can i fix this issue? (also when everything is in one function, it goes from 1 row, to three each time the button is clicked to submit the data)
var list = [];
function addAppointment() {
var appointmentData = {};
var inputDate = document.getElementById('date').value;
appointmentData.date = inputDate;
var inputStartTime = document.getElementById('startTime').selectedIndex;
appointmentData.startTime = inputStartTime;
var inputEndTime = document.getElementById('endTime').selectedIndex;
appointmentData.endTime = inputEndTime;
var inputSubject = document.getElementById('subject');
appointmentData.subject = inputSubject;
var inputVenue = document.getElementById('venue');
appointmentData.venue = inputVenue;
list.push(appointmentData);
}
console.log("list", list)
function addData(data) {
console.log(data)
const tbody = document.getElementById("tbody");
for (var i = 0; i < data.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = `
<td>${data[i].inputDate}</td>
<td>${data[i].inputStartTime}</td>
<td>${data[i].inputEndTime}</td>
<td>${data[i].inputSubject}</td>
<td>${data[i].inputVenue}</td>
`;
tbody.append(tr);
}
addData(list);
}
</script>
This was massive, everything is displaying in the list correctly, but sadly in the table row, it still says undefinded in the cells?
Comment posted by ATD
And….your appointmentData object has “date”, “startTime”, “endTime”, “Subject” and “venue” but you are outputting the names of the variables instead?????
Comment posted by Hybrid1000
You’re my hero. Sent by god
Comment posted by Hybrid1000
Sadly it still says undefined within the cells ://
Comment posted by Hybrid1000
yeah it is, but everything is still appearing as undefined
Comment posted by James Rushford
ok cool, i think you need to make new elements for each
