title: How do you get back to global scope after running a function in JavaScript?
body: <p>When starting my program, everything initially runs as intended. However, when I click a button on the webpage that runs my clearBoard() function, the code in the global scope no longer runs.</p>
  <p>I've used console.log and everything that is outside of a function is empty after running the clearBoard().</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const container = document.getElementById("container");
  //Create board
  function makeRows(rows, columns) {
    //let container = document.getElementById("container");
    container.style.setProperty('--grid-rows', rows);
    container.style.setProperty('--grid-cols', columns);
    for (c = 0; c &lt; (rows * columns); c++) {
      let cell = document.createElement("div");
      //cell.innerText = (c + 1);
      container.appendChild(cell).className = "grid-item";
    }
  
  }
  
  //Draw starting Board
  makeRows(16, 16);
  
  //Paint on board
  const paint = document.getElementsByClassName("grid-item");
  console.log(container);
  
  for (let i = 0; i &lt; paint.length; i++) {
    paint[i].addEventListener('mouseover', function() {
      this.style.backgroundColor = "black";
    });
  }
  
  //Get new board size
  function getNewBoard() {
    //clear divs
    const removeOldGrid = document.getElementById("container");
    removeOldGrid.innerHTML = '';
    //get input from user
    let squares = prompt('How many squares per side?');
    //convert input to number
    let squaresInt = parseInt(squares);
    //generate new board
    makeRows(squaresInt, squaresInt);
  }
  
  //Clear board
  function clearBoard() {
  
    for (let i = 0; i &lt; paint.length; i++) {
      paint[i].style.backgroundColor = "";
  
    }
    getNewBoard();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --grid-cols: 0;
    --grid-rows: 0;
    --paint-color: ;
  }
  
  #container {
    display: grid;
    padding: 10em;
    height: 40vh;
    width: 50vh;
    margin-left: auto;
    margin-right: auto;
    /*grid-gap: 1em;*/
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
  }
  
  .grid-item {
    padding: 1em;
    border: 1px solid #ddd;
    text-align: center;
    /*background-color: var(--paint-color);*/
  }
  
  
  /*.grid-item:hover {
          background-color: black;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="clearBoard()"&gt;Clear Board&lt;/button&gt;
  
  &lt;div id="container"&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>