Создать таблицу с помощью JavaScript

Question

Это мой самый первый код JS, я следовал инструкциям моего учебника, но все же таблица не отображается на веб-странице.Я уже добавил id="eventList" в свой HTML и укоротил массивы.вот код моего JS.

var eventDates = ["July 29, 2018 11:00:00", "July 30, 2018 19:00:00"];

var eventDescriptions = ["Classics Brunch", "Lasers and Light"];

var eventPrices = ["$12", "$12/$18/$24"];

var thisDay = new Date("August 30, 2018");

var tableHTML = "<table id='eventTable'><caption>Upcoming Events</caption> 
                     <tr><th>Date</th><th>Event</th><th>Price</th></tr>";

var endDate = new Date();
endDate = thisDay.getTime() + 14 * 24 * 61 * 61 * 1000;

for (var i = 0; i < eventDates.length; ++i) {
  var eventDate = new Date();
  eventDate = eventDates[i];

  var eventDay = eventDate.toDateString();

  var eventTime = eventDate.toLocaleTimeString();

  if ((thisDay <= eventDate) && (eventDate <= endDate))
    tableHTML = "<tr><td>eventDay @ eventTime</td><td>description</td> 
      <td>price</td></tr>" + eventDay + eventTime;

    var description = eventDescriptions[i];
    var price = eventPrices[i];

  }

  tableHTML = "</table>";

  document.getElementById("eventList").innerHTML = tableHTML;

<div id="eventList">
</div>

Answer 1

Проблема в том, что вы постоянно переназначаете tableHTML при использовании = - вам нужно добавить / объединить новый HTML с помощью +=:

var tableHTML = "<table id='eventTable'><caption>Upcoming Events</caption> 
                 <tr><th>Date</th><th>Event</th><th>Price</th></tr>";

var endDate = new Date();
endDate = thisDay.getTime() + 14 * 24 * 61 * 61 * 1000;

for (var i = 0; i < eventDates.length; ++i) {
var eventDate = new Date();
eventDate = eventDates[i];

var eventDay = eventDate.toDateString();

var eventTime = eventDate.toLocaleTimeString();

if ((thisDay <= eventDate) && (eventDate <= endDate))
    tableHTML += "<tr><td>eventDay @ eventTime</td><td>description</td> 
    <td>price</td></tr>" + eventDay + eventTime;

var description = eventDescriptions[i];
var price = eventPrices[i];

}

tableHTML += "</table>";

Answer 2

tableHTML = "</table>";

Каждый раз, когда вы присваиваете значение tableHTML, вы перезаписываете его новым значением и отбрасываете старое значение.

Возможно, вы имели в виду:

tableHTML = tableHTML + "</table>";