将JavaScript数据放入HTML表格单元格

Question

我正在构建一个弹出框，每次有人触发它（有延迟）时，都会显示一个计数器，该计数器显示单击次数和单击日期！

我该如何获取时间和点击以显示在单元格表中，如下所示：

 Clicks Time 1 thusday 4 2018 2 monday 3 2018 

这是我的HTML代码：

 function Msg1() { document.getElementById('myText').innerHTML = 'Hey <strong>Thanks!</strong>'; } var counter1 = 1; var popup = document.getElementById("popup"); var input = document.getElementById("popup-delay"); var showButton = document.getElementById("popup-show"); var closeButton = document.getElementById("popup-close"); showButton.addEventListener("click", function onShowClick() { // Get the user input and convert it into a number var value = parseInt(input.value, 10); // If the input is not a number if (isNaN(value)) { // Warn the user alert("NaN (Not A Number) !"); } // Otherwise else { // Convert milliseconds to seconds var delay = value * 1000; // Turn off the click listener on the "Show" button showButton.removeEventListener("click", onShowClick); // Start the countdown to show the popup document.getElementById("num1").innerHTML = counter1; counter1 = counter1 + 1; document.getElementById("num4").innerHTML += "<span>" + Date() + "</span>"; setTimeout(function() { // Show the popup popup.style.display = "block"; // Turn on the click listener on the "Close" button closeButton.addEventListener("click", function onCloseClick() { // Turn off the click listener on the "Close" button closeButton.removeEventListener("click", onCloseClick); // Turn on the click listener on the "Show" button showButton.addEventListener("click", onShowClick); // Hide the popup popup.style.display = "none"; }); }, delay); } }); 

 #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> 

Answer 1

问题是您在渲染dom之前通过id获取元素，因此它总是获取null值，只需将按钮的事件侦听器更改为以下函数即可

 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");
  // get the user input and convert it into a number
  var value = parseInt(input.value, 10);
  // if the input is not a number
  if (isNaN(value)) {
    // warn the user
    alert("NaN (Not A Number) !");
  }
  // otherwise
  else {
    // convert milliseconds to seconds
    var delay = value * 1000;
    // turn off the click listener on the "Show" button
    showButton.removeEventListener("click", onShowClick);
    // start the countdown to show the popup
   //      document.getElementById("num1").innerHTML= counter1;
      counter1= counter1+1; 
      let currDate = Date();
 //   document.getElementById("num4").innerHTML += "<span>" + currDate + "</span>"; 
 // add new Row
      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 () {
      // show the popup
      popup.style.display = "block";
      // turn on the click listener on the "Close" button
      closeButton.addEventListener("click", function onCloseClick () {
        // turn off the click listener on the "Close" button
        closeButton.removeEventListener("click", onCloseClick);
        // turn on the click listener on the "Show" button
        showButton.addEventListener("click", onShowClick);
        // hide the popup
        popup.style.display = "none";



      });
    }, delay);
  }
}

然后在html中的onclick上调用它，如下所示

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

像下面这样的输出

主页 弹出页面