Design a dynamic table using JavaScript

After spending hours working on my first JavaScript code, following the instructions in my textbook, I still can't get the table to display on my webpage. The id="eventList" is already included in my HTML and I've shortened the arrays. Here's a snippet of my JS code:

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>

https://i.sstatic.net/C5Cqd.jpg

Answer №1

The variable named tableHTML is being re-assigned with a new value each time, replacing the existing value.

Instead of overwriting the previous value every time, you may want to consider concatenating the new value with the existing one like this:

tableHTML = tableHTML + "</table>";

Answer №2

You're facing an issue where you are constantly re-assigning the variable tableHTML each time you use the assignment operator (=). To resolve this, you should actually be appending or concatenating the new HTML content using the += operator:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

calculation of progress bar advancement

I want to make the progress bar in my game responsive to changes in the winning score. Currently, it moves from 0% to 100%, which is equivalent to 100 points - the default winning score. But I need the progress bar to adjust accordingly based on the user-i ...

utilizing mongoose populate for displaying the author

One of the features on my website allows users to add notices, and I want the page to display the author of each notice. const notices = await Notice.findById(id).populate('author'); When I access this route, I can successfully log the authors o ...

Jquery script that utilizes the Steam WebAPI to return data

I'm encountering an issue with a script I found on github. I added value.appid myself, thinking it was logical, but I believe that data.response.games contains values for all my games. How can I either print or view what is defined? I would like to ...

Align anchor tag text in the center vertically after adjusting its height using CSS

I'm having trouble vertically aligning the text within an anchor tag that has a height and background color set. The goal is to have equal amounts of space above and below the text, but currently all the extra height is being added below the text. I&a ...

Leveraging the Google Geocode API through HTTP GET requests

I am facing a challenge in my HTML file where I have a map and I am using HTTP get with jQuery to retrieve a device's location. However, I am struggling to plot this location on the map. I need to parse the location information and display it accurate ...

Retrieve class attributes within callback function

I have integrated the plugin from https://github.com/blinkmobile/cordova-plugin-sketch into my Ionic 3 project. One remaining crucial task is to extract the result from the callback functions so that I can continue working with it. Below is a snippet of ...

I am experiencing an issue where the submit button in my HTML form is unresponsive to clicks

Welcome to my HTML world! <form action="petDetails.php" id="animalInput"> <ul> <li> <label for="dogName">Enter Dog's Name:</label><input id="dogName" type="text" name="dogName" /> </l ...

While working on my Laravel and Vue.js project, I encountered the following error message: "Module not found: Error: Can't resolve './vue/app' in 'C:vue odolist esourcesjs'"

Running into an issue where the app.vue file cannot be found in the app.js. I'm using Laravel version "8.31.0" and VueJS version "^2.6.12". Any assistance would be highly appreciated. The content of app.js is: require('./bootstrap'); impor ...

Ways to update the DOM once a function has been executed in VUE 3 JS

I'm working on implementing a "like" or "add to favorite" feature in VUE 3. However, I'm facing an issue where the UI doesn't update when I like or unlike something. It only refreshes properly. I'm using backend functions for liking and ...

Rendering React components in a predetermined sequence for an interactive user experience

I am working with a component that includes multiple images and I need to render them dynamically based on predetermined data. <ImageComponent image={this.props.data.image1} /> <ImageComponent image={this.props.data.image2} /> <Imag ...

Is the fixed header see-through?

I have a query regarding my website design. Currently, the fixed header on my site is transparent and when I scroll down, the content overlaps the header. However, I want the header to remain above the content. Can anyone provide assistance with this issue ...

Having trouble setting up Node.js on a Mac computer

Upon completing the regular installation on Mac, I am unable to find Node in the terminal. Even after defining the PATH with the line: export PATH=/usr/local/bin: $PATH, it still does not locate Node or npm in the terminal. ...

What is the best method to position a modal in the exact center of the screen?

Is there a way to position the modal at the center of the screen? I have tried implementing this HTML and JavaScript code. Interestingly, it works fine in Chrome console but fails when I try to refresh the page. $('.modal').css('top', ...

Preserve the location of a moveable div using jQuery

I have implemented draggable divs in my JSP page, allowing users to move them around freely. After dragging the divs, I would like to save their positions either in a cookie or database for future reference. Could you please advise on the best way to ach ...

Footer that sticks to the bottom of the page across various pages

Having trouble printing a 2-page document on Chrome. The first page has fixed content while the second page has dynamic content in an extended table. The problem I'm facing is keeping the footer at the bottom of the second page. The CSS code below wo ...

Display tab content in Vue.js upon clicking

I'm encountering an issue with my Vue.js code. I want to display specific content every time I click on a tab. Here's the code snippet I have written: <template> <nav class="horizontal top-border block-section"> <div class= ...

Javascript postback functionality is fully operational in bootstrap 4, however, it is failing to return

Encountering an issue with my postback JavaScript function in the ASP/BootStrap environment. After searching on stackoverflow for a solution, I couldn't find one that resolved my problem. The problem is when I click on an image, the page reloads (the ...

Is it possible to apply a tailwind class that fades or transitions into something else after a specific duration?

How can I achieve a transition effect from the bg-red-300 class to bg-transparent, or a different background class, over a 2-second duration? Do I need to use javascript for this effect? I would like an element to be highlighted and then return to its no ...

Automating the process of posting a file to a form with javascript

I have a piece of client-side JavaScript that creates a jpeg file through HTML5 canvas manipulation when the user clicks an "OK" button. My goal is to automatically insert this jpeg output into the "Upload Front Side" field in a form, simulating a user up ...

Working with arrays and data to populate tables and cross tables using a single Eloquent Model in Vue and Laravel

There are three tables in the database: species, panel, and a cross table called species_panel. The relationship between them is that one panel can contain multiple species, so a one-to-many relationship is used. Data needs to be inserted into the panel ta ...