Create a table with javascript

Question

This is my very first JS code, I followed the instruction of my textbook, but still, the table does not show up on the webpage. I have the id="eventList" already added into my HTML and shorten the arrays. here is the code of my 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>

tableHTML = "</table>"; You're completely reassigning tableHTML each time. Try concatenating instead, with +=, if you want to add to the existing string value. — CertainPerformance
– CertainPerformance, Commented Feb 23, 2019 at 21:23
check the console for errors eventDate.toDateString() is not correct string doesnt have toDateString method — Madhawa Priyashantha
– Madhawa Priyashantha, Commented Feb 23, 2019 at 21:25

Quentin · Accepted Answer · 2019-02-23 21:23:54Z

2

tableHTML = "</table>";

Either time you assign a value to tableHTML you overwrite it with a new value and discard the old value.

Perhaps you meant:

tableHTML = tableHTML + "</table>";

answered Feb 23, 2019 at 21:23

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Over a year ago

Well thx for the responses. I did fix the concatenations. But still the code doesn't work! Any other mistakes that I have in the code ?? Thanks

Jack Bashford · Accepted Answer · 2019-02-23 21:24:51Z

The problem is you're constantly re-assigning tableHTML when you use = - you need to be appending / concatenating the new HTML by using +=:

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>";

Collectives™ on Stack Overflow

Create a table with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related