Attempting to achieve this goal involves creating an array that holds an object with instance variables related to form input. After that, the next step is to add whatever was submitted from the form to the table. However, upon calling the function to accomplish this task, nothing seems to happen. I am struggling to identify where exactly the mistake lies in this process. It's worth noting that all of this is being implemented using bootstrap 4.
var locationList = [];
function locations_addAndSave() {
var locationForm = document.forms['locations'];
var city = locationForm.elements['city'].value;
var opening = locationForm.elements['opening'].value;
var closing = locationForm.elements['closing'].value;
var locationData = new Object();
locationData.city = city;
locationData.opening = opening;
locationData.closing = closing;
locationList.push(locationData);
var locationHtml = addLocations(locationList);
var table = document.getElementById("locationTable");
table.innerHTML = locationHtml;
}
function addLocations(locationList) {
var newTable = "";
for (var i = 0; i < locationList.length; i++) {
newTable += "<tr>";
newTable += "<td>";
newTable += locationList[i].city;
newTable += "</td>";
newTable += "<td>";
newTable += locationList[i].opening;
newTable += "</td>";
newTable += "<td>";
newTable += locationList[i].closing;
newTable += "</td>";
}
}<table class="table table-bordered" id="locationTable">
<thead>
<tr>
<th>City</th>
<th> Opens (AM) </th>
<th>Closes(PM)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Calgary</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>Edmonton</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>ancouver</td>
<td>11</td>
<td>10</td>
</tr>
</tbody>
</table>
<form action="ignore this" name="locations">
<div class="form-group">
<label for="city">City</label>
<input type="text" name="city" placeholder="Enter city">
</div>
<div class="form-group">
<label for="closing">Opening</label>
<input type="text" name="opening" placeholder="Enter Opening time 9-11 AM">
</div>
<div class="form-group">
<label for="">Closing</label>
<input type="text" name="closing" placeholder="Enter Closing time 8-10 PM">
</div>
<button type="button" class="btn btn-default" onclick="locations_addAndSave()">Add Location </button>
</form>var locationList = [];
function locations_addAndSave() {
var locationForm = document.forms['locations'];
var city = locationForm.elements['city'].value;
var opening = locationForm.elements['opening'].value;
var closing = locationForm.elements['closing'].value;
var locationData = new Object();
locationData.city = city;
locationData.opening = opening;
locationData.closing = closing;
locationList.push(locationData);
var locationHtml = addLocations(locationList);
var table = document.getElementById("locationTable");
table.appendChild(locationHtml);
}
function addLocations(locationList) {
var newTable = document.createElement('tr');
for (var i = 0; i < locationList.length; i++) {
var newCell1 = document.createElement('td');
newCell1.innerText = 'locationlist[i].city';
newTable.appendChild(newCell1);
var newCell2 = document.createElement('td');
newCell2.innerText = 'locationlist[i].opening'
newTable.appendChild(newCell2);
var newCell3 = document.createElement('td');
newCell.innerText = 'locationlist[i].closing';
newTable.appendChild(newCell3);
}
return newTable;
}