Hi-
I'm new to JavaScript and am trying to create/add a Pause button to a countdown timer. As I understand it, I think I first need to create a button and then create/write a corresponding function for that button. Unfortunately, the Pause button does not display on the html page. Suggestions on what I'm doing wrong? Thanks.

Here's the JS code I've written to create the button (*Note: if it's helpful, I've also appended the full html and js files):
Code:
    var pauseButton = document.createElement("input");
    pauseButton.setAttribute("type", "button");
    pauseButton.setAttribute("value", "Pause");
    pauseButton.onclick = function () {
        pauseCountdown();
    }
And here's the JS code I've written to create the function:
Code:
function pauseCountdown() {
    // pause timer
    var clearIntervalHandle;
}
HTML Code:
<head>
  <title>Countdown</title>
  <style type="text/css">
   body {
        font-family: sans-serif;
        color: #333;
   }
   #container {
       width: 400px;
       margin: auto;
   }
   h1 { font-size: 5em; }
  </style>
</head>
<body>
  <div id="container">
      <div id="inputArea">
      </div>
      
      <h1 id="time">0:00</h1>
      
  </div> 
  <script src="script.js"></script>
</body>
Code:
// two global variables
var secondsRemaining;
var intervalHandle;

function resetPage() {
    document.getElementById("inputArea").style.display = "block";
}

function tick() {
    // grab the h1
    var timeDisplay = document.getElementById("time");
    
    // turn seconds into mm:ss
    var min = Math.floor(secondsRemaining / 60);
    var sec = secondsRemaining - (min * 60);
    
    // add a leading zero (as a string value) if seconds less than 10
    if (sec < 10) {
        sec = "0" + sec;
    }
    // concatenate with colon
    var message = min + ":" + sec;
    // now change the display
    timeDisplay.innerHTML = message;
    
    // stop if down to zero
    if (secondsRemaining === 0) {
        alert("Done!");
        clearInterval(intervalHandle);
        resetPage();
    }
    // subtract from seconds remaining
    secondsRemaining--;
}

function startCountdown() {
    // get contents of the "minutes" text box
    var minutes = document.getElementById("minutes").value;
    // check if not a number
    if (isNaN(minutes)) {
        alert("Please enter a number!");
        return;
    }
    // how many seconds?
    secondsRemaining =  minutes * 60;
    // every second, call the "tick" function
    intervalHandle = setInterval(tick, 1000);
    // hide the form
    document.getElementById("inputArea").style.display = "none";
}

function pauseCountdown() {
    // pause timer
    var clearIntervalHandle;
}

// as soon as the page is loaded...
window.onload =  function () {
    // create input text box and give it an id of "minutes"
    var inputMinutes = document.createElement("input");
    inputMinutes.setAttribute("id", "minutes");
    inputMinutes.setAttribute("type", "text");
    // create a button
    var startButton = document.createElement("input");
    startButton.setAttribute("type", "button");
    startButton.setAttribute("value", "Start Countdown");
    startButton.onclick = function () {
        startCountdown();
    };
    // create a pause button
    var pauseButton = document.createElement("input");
    pauseButton.setAttribute("type", "button");
    pauseButton.setAttribute("value", "Pause");
    pauseButton.onclick = function () {
        pauseCountdown();
    }
    // add to the DOM, to the div called "inputArea"
    document.getElementById("inputArea").appendChild(inputMinutes);
    document.getElementById("inputArea").appendChild(startButton);
};