JS - How can I set a div's width and height from an input value?

Question

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.

Here's the HTML code:

<form action="" id="theForm">
    <label for="width">Box Width: </label>
    <input type="text" id="width" name="width">

    <label for="height">Box Height: </label>
    <input type="text" id="height" name="height">

    <input type="submit" value="Create Box" id="submit-btn">
</form>

Here's the JS 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";
});

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.

Answer 1

The form submits so the page refreshes. You need to cancel the form submission.

 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"; return false; }); 

 div { background-color: #CFC; } 

 <form action="" id="theForm"> <label for="width">Box Width: </label> <input type="text" id="width" name="width"> <label for="height">Box Height: </label> <input type="text" id="height" name="height"> <input type="submit" value="Create Box" id="submit-btn"> </form> 

Answer 2

Works for me with one change: adding return false; to the handler, so the submit doesn't go through and re-load the page.

 var form = document.getElementById("theForm"); var 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"; box.style.border = "1px solid red"; // for demo visibility purposes return false; }); 

 <form action="" id="theForm"> <label for="width">Box Width:</label> <input type="text" id="width" name="width"> <label for="height">Box Height:</label> <input type="text" id="height" name="height"> <input type="submit" value="Create Box" id="submit-btn"> </form> 

Answer 3

I'd probably agree with @epascarello's answer, but instead of returning false, i'd use preventDefault();

form.addEventListener("submit", function(e) { // Don't forget to pass the 'e' parameter
  var width = form.elements["width"].value,
    height = form.elements["height"].value;

  box.style.width = width + "px";
  box.style.height = height + "px";

  e.preventDefault();
});

Using preventDefault will prevent the default behavior of the event beeing passed, which is the form submit.

You can use it with links and other stuffs too.