Embedding JavaScript information into a cell of an HTML table

Question

Embedding JavaScript information into a cell of an HTML table

I am currently working on creating a pop-up box that, when triggered (with a delay), will showcase a counter displaying the number of clicks along with the dates of each click!

I would like to present this information in a structured table format within a cell, similar to the following example:

Clicks         Time

 1            Thursday 4, 2018
 2            Monday 3, 2018

Below is the snippet of my HTML code implementation:

function DisplayMessage() {
  document.getElementById('myText').innerHTML = 'Hey <strong>Thanks!</strong>';
}

var clickCounter = 1;
var popupElement = document.getElementById("popup");
var inputField = document.getElementById("popup-delay");
var displayButton = document.getElementById("popup-show");
var closeButton = document.getElementById("popup-close");

displayButton.addEventListener("click", function onClickToShow() {

  var userInput = parseInt(inputField.value, 10);

  if (isNaN(userInput)) {
    alert("NaN (Not A Number) !");
  }
  else {

    var timeDelay = userInput * 1000;

    displayButton.removeEventListener("click", onClickToShow);

    document.getElementById("num1").innerHTML = clickCounter;
    clickCounter = clickCounter + 1;
    document.getElementById("num4").innerHTML += "<span>" + Date() + "</span>";
    
    setTimeout(function() {

      popupElement.style.display = "block";

      closeButton.addEventListener("click", function onCloseClicked() {
       
        closeButton.removeEventListener("click", onCloseClicked);

        displayButton.addEventListener("click", onClickToShow);

        popupElement.style.display = "none";
      });
    }, timeDelay);
  }
});

#popup {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: yellow;
  padding: 1em;
}

#thecounter {
  float: right;
  background-color: rebeccapurple;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 10%;
  margin-right: 10px;
  font-size: 30px;
  color: white;
  text-align: center;
}

#thetime {
  float: right;
  background-color: rosybrown;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 10%;
  font-size: 30px;
  color: white;
  text-align: center;
}

#num4 span {
  font-size: 20px;
  display: block;
  margin-bottom: 4px;
  padding: 4px;
}

Delay: <input type="text" id="popup-delay" />  <button type="button" id="popup-show">Show</button>
<div id="popup">
  <p>I am a popup :-)</p>
  <button type="button" id="popup-close">Close</button>
</div>
<div id="container">
  <div id="thecounter">
    <p id="num2">clicks </p>
    <p id="num1">0 </p>
  </div>
  <div id="thetime">
    <p id="num3">time </p>
    <p id="num4"> </p>
  </div>
</div>

javascript html css

Answer 1

Answer №1

One issue arises when attempting to access elements by id before the DOM is fully rendered, resulting in a null value being returned consistently. To address this problem, modify the event listener of the button accordingly:

 function onShowClick () {

var popup = document.getElementById("popup");
var input = document.getElementById("popup-delay");
var showButton = document.getElementById("popup-show");
var closeButton = document.getElementById("popup-close");
  // Obtain user input and convert it into a number
  var value = parseInt(input.value, 10);
  // Check if the input is not a number
  if (isNaN(value)) {
    // Notify the user about invalid input
    alert("NaN (Not A Number) !");
  }
  // Handle valid inputs
  else {
    // Convert milliseconds to seconds
    var delay = value * 1000;
    // Disable click listener for the "Show" button
    showButton.removeEventListener("click", onShowClick);
    // Begin countdown to display the popup
   //      document.getElementById("num1").innerHTML= counter1;
      counter1= counter1+1; 
      let currDate = Date();
 //   document.getElementById("num4").innerHTML += "<span>" + currDate + "</span>"; 
 // Add a new row to the table
      let table = document.getElementById("table");
      var tr = document.createElement('tr');
      var tdCounter = document.createElement('td');
       tdCounter.appendChild(document.createTextNode(counter1))
      tr.appendChild(tdCounter)
      var tdTime = document.createElement('td');
      tdTime.appendChild(document.createTextNode(currDate))
      tr.appendChild(tdTime)

       table.appendChild(tr)

    setTimeout(function () {
      // Display the popup after the designated delay
      popup.style.display = "block";
      // Enable click listener for the "Close" button
      closeButton.addEventListener("click", function onCloseClick () {
        // Disable click listener for the "Close" button
        closeButton.removeEventListener("click", onCloseClick);
        // Re-enable click listener for the "Show" button
        showButton.addEventListener("click", onShowClick);
        // Hide the popup
        popup.style.display = "none";



      });
    }, delay);
  }
}

To invoke this function on a button's onclick event in the HTML code, implement it as shown below:

    <body>
Delay: <input type="text" id="popup-delay" />
<button type="button" onclick="onShowClick()" id="popup-show">Show</button>
<div id="popup">
  <p>I am a popup :-)</p>
  <button type="button" id="popup-close">Close</button>
</div>


<div id="container">
<table id="table">
</table>    

</div>
</body>

The expected output will resemble the following:

Main Page Pop up Page

Answer 2

One issue arises when attempting to access elements by id before the DOM is fully rendered, resulting in a null value being returned consistently. To address this problem, modify the event listener of the button accordingly:

 function onShowClick () {

var popup = document.getElementById("popup");
var input = document.getElementById("popup-delay");
var showButton = document.getElementById("popup-show");
var closeButton = document.getElementById("popup-close");
  // Obtain user input and convert it into a number
  var value = parseInt(input.value, 10);
  // Check if the input is not a number
  if (isNaN(value)) {
    // Notify the user about invalid input
    alert("NaN (Not A Number) !");
  }
  // Handle valid inputs
  else {
    // Convert milliseconds to seconds
    var delay = value * 1000;
    // Disable click listener for the "Show" button
    showButton.removeEventListener("click", onShowClick);
    // Begin countdown to display the popup
   //      document.getElementById("num1").innerHTML= counter1;
      counter1= counter1+1; 
      let currDate = Date();
 //   document.getElementById("num4").innerHTML += "<span>" + currDate + "</span>"; 
 // Add a new row to the table
      let table = document.getElementById("table");
      var tr = document.createElement('tr');
      var tdCounter = document.createElement('td');
       tdCounter.appendChild(document.createTextNode(counter1))
      tr.appendChild(tdCounter)
      var tdTime = document.createElement('td');
      tdTime.appendChild(document.createTextNode(currDate))
      tr.appendChild(tdTime)

       table.appendChild(tr)

    setTimeout(function () {
      // Display the popup after the designated delay
      popup.style.display = "block";
      // Enable click listener for the "Close" button
      closeButton.addEventListener("click", function onCloseClick () {
        // Disable click listener for the "Close" button
        closeButton.removeEventListener("click", onCloseClick);
        // Re-enable click listener for the "Show" button
        showButton.addEventListener("click", onShowClick);
        // Hide the popup
        popup.style.display = "none";



      });
    }, delay);
  }
}

To invoke this function on a button's onclick event in the HTML code, implement it as shown below:

    <body>
Delay: <input type="text" id="popup-delay" />
<button type="button" onclick="onShowClick()" id="popup-show">Show</button>
<div id="popup">
  <p>I am a popup :-)</p>
  <button type="button" id="popup-close">Close</button>
</div>


<div id="container">
<table id="table">
</table>    

</div>
</body>

The expected output will resemble the following:

Main Page Pop up Page

Embedding JavaScript information into a cell of an HTML table

Answer №1

Similar questions

Retrieve HTML content from Vuetify components without displaying it on the webpage

What is the best way to combine an array of objects into a single object in typescript?

Styling Circles with CSS

How to position radio buttons in line with labels containing inline inputs using Vue and Bootstrap

Exploring the world of jQuery animation and background colors with Animate()

Adding a question mark at the top of the content in a txt file using node.js's

What is the best way to store data retrieved from an asynchronous database callback in Nodejs with express?

What is the process for designing a button with a circular element connected to its left edge?

Stylish navigation bars with CSS and Jquery for seamless browsing experience

What is preventing my JavaScript variable from being defined outside of this function?

Adding a SpotLight to Camera in ThreeJS: A Step-by-Step Guide

Filter an array using an algorithm inspired by Binary Search Trees

When incorporating a script in a Gatsby site, remember to load it only once on the initial

A guide on iterating and accessing Vue data in a loop

How can I make a Bootstrap 4 modal autoplay an iframe on page load?

Implement Conditional Enabling of Forms in JavaScript or jQuery to Support Single Form Usage

The functionality of an external Javascript library fails to operate properly once the website is deployed to a hosting

Firefox causing line-height problem

The React application is showing an empty page without any visible errors during the compilation process

passport not initializing session with requests