title: JavaScript DOM - access a variable made with document.createElement after that element is created?
body: <p>I created a div (variable "box") using document.createElement inside of a function. I then need to use that variable inside other functions. Is it possible to access this variable outside the function or assign it globaly after it has been created?</p>
  
  <p><em>My code is supposed to do 3 things (its the etch a sketch project for 
  Odin Project).</em></p>
  
  <ul>
  <li>generate a grid of 16x16 boxes.    </li>
  <li>let user input a number of boxes and create new grid based off of the users input.</li>
  <li>on mouseOver manipulate the color of the boxes in different ways (labeled "black" "color" and "psych".</li>
  </ul>
  
  <p><em>Things I have tried (but failed at).</em></p>
  
  <ul>
  <li><p>put all functions inside the "initGrid" function. This reguired me to move the eventListeners for buttons inside as well and then they would not work.</p></li>
  <li><p>use container.childNodes to try and assign a variable after those nodes where created.</p></li>
  <li><p>adding another "let box = document.createElement("div");" outside of the variable in an attempt to name it globaly.</p></li>
  <li><p>I dont know how many other things I have tried, I've lost count.</p></li>
  </ul>
  
  <p>Please note that the only button functionality I am trying to get to work at this point is the "color" option. I have the others working but they are in other html files.</p>
  
  <p>Any help would be amazing, I am lost with it. Let me know if I can clarify on anything.</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-css lang-css prettyprint-override"><code>* {
   padding: 0;
   margin: 0;
  }
  
  header {
   text-align: center;
   background-color: maroon;
   padding:10px;
   margin: 10px 10px 20px 10px;
  }
  
  .title {
   font-family: sans-serif;
   font-size: 50px;
   color: white;
  }
  
  #wrapper{
   text-align: center;
   margin: 0px 0px 15px 0px;
  }
  
  #btn{
   color:red;
  }
  
  #container{
   margin:0 auto;
   display: flex;
      justify-content: center;
      flex-wrap: wrap;
   max-width:700px;
   max-height:700px;
   min-width: 700px;
   min-height: 700px;
   padding:10px;
   border:1px solid black;
  }
  
  .boxes{
   background-color: red;
   border: 0.125px solid white;
   box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
   &lt;title&gt;sketch&lt;/title&gt;
   &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;header&gt;
    &lt;h1 class="title"&gt;Etch-A-Sketch&lt;/h1&gt;
   &lt;/header&gt;
   &lt;div id="wrapper"&gt;
    &lt;button id="btn"&gt;Reset Grid&lt;/button&gt;
      &lt;/div&gt;
     &lt;div id=btns&gt;
      &lt;button id="black"&gt;Paint it Black&lt;/button&gt;
      &lt;button id="color"&gt;Rainbow&lt;/button&gt;
      &lt;button id="psych"&gt;Psychedelic Disco&lt;/button&gt;
     &lt;/div&gt;
   &lt;div id="container"&gt;
   &lt;/div&gt;
   &lt;div id="prompt"&gt;
   &lt;/div&gt;
  
  
   &lt;script type="text/javascript"&gt;
    const container = document.getElementById("container");
    const rstbtn = document.getElementById("btn");
    const btns = document.getElementById("btns");
    const black = document.getElementById("black");
    const color = document.getElementById("color");
    const psych = document.getElementById("psych");
    let box = document.createElement("div");
  
    black.addEventListener("click",function(){
     option("black");
    });
    color.addEventListener("click",function(){
     option("color");
    });
    psych.addEventListener("click",function(){
     option("psych");
    }); 
  
  
    initGrid(16);
  
    function initGrid(num){
     for (let i=0; i&lt;num; i++){
      for (let j=0; j&lt;num; j++){
  
       let box = document.createElement("div");
              let boxSize = (690/num) + "px";
              box.style.height = boxSize;
              box.style.width = boxSize;
       box.classList.add("boxes");
       container.appendChild(box);
  
       box.addEventListener ("mouseover",function(){
       console.log("hover, hover, hover, hover");
       });
      }
     } 
    };
  
  
     function option(input){
      if (input == "color"){
       console.log("color picked is " + rainbow())
       box.style.backgroundColor = rainbow()
      }else if (input == "psych"){
       console.log("psych")
      }else{
       console.log("black")
      }
     };
  
  
    rstbtn.addEventListener("click", function(){
     let newNum = window.prompt ("Enter how many tiles you would like the new grid to be.", "16");
     container.innerHTML="";
     initGrid(newNum);
  
    });
  
  
    //color function
    function rainbow() {
     let randomNum = Math.floor(Math.random() * 10);
     if (randomNum == 0){
      return "yellow";
     }else if(randomNum == 1){
      return "orange";
     }else if(randomNum == 2){
      return "red";
     }else if(randomNum == 3){
      return "maroon";
     }else if(randomNum == 4){
      return "blue";
     }else if(randomNum == 5){
      return "indigo";
     }else if(randomNum == 6){
      return "pink";
     }else if(randomNum == 7){
      return "purple";
     }else if(randomNum == 8){
      return "green";
     }else if(randomNum == 9){
      return "lime";
     }else{
      return "black";
     }
    };
     
   &lt;/script&gt;
     
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>