title: JS - How can I set a div's width and height from an input value?
body: <p>So, I'm creating a box using JavaScript and then I want to set said box's width and height using two form inputs, one for width and one for height. I can't seem to make that happen. </p>
  
  <p>Here's the HTML code: </p>
  
  <pre><code>&lt;form action="" id="theForm"&gt;
      &lt;label for="width"&gt;Box Width: &lt;/label&gt;
      &lt;input type="text" id="width" name="width"&gt;
  
      &lt;label for="height"&gt;Box Height: &lt;/label&gt;
      &lt;input type="text" id="height" name="height"&gt;
  
      &lt;input type="submit" value="Create Box" id="submit-btn"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here's the JS code: </p>
  
  <pre><code>var form = document.getElementById("theForm"),
      box = document.createElement("div");
  
      document.body.appendChild(box);
  
  form.addEventListener("submit", function() {
      var width = form.elements["width"].value,
          height = form.elements["height"].value;
  
      box.style.width = width + "px";
      box.style.height = height + "px";
  });
  </code></pre>
  
  <p>Seems to work fine when I set the width and height manually but not when I try to get it from the input. 
  I'm pretty new to JS so any help would be greatly appreciated. </p>