자바 스크립트 데이터를 HTML 표 셀에 넣기

Question

누군가 (지연이 발생할 때마다) 클릭 수와 클릭 수를 보여주는 카운터가 표시되는 팝업 상자를 만들고 있습니다!

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>

:

여기

Clicks   Time 

1   thusday 4 2018 
2   monday 3 2018 

내 HTML 코드 : 나는 시간과 클릭을 얻을 수있는 방법

이 같은 세포 테이블 무언가에 표시하는

Answer 1

문제는 언제나 아래

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에서 온 클릭을에 전화 null 값 를 얻을 수 있도록 DOM 렌더링하기 전에 ID를 기준으로 요소를지고 있다는 점이다 아래

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

아웃 등의 버튼은 아래

Main Page Pop up Page

같이 넣어