CODEWITHSUNDEEP
javascripthtmlcss
aroundsix
aroundsix

Reputation: 131

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

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.

Upvotes: 1

Views: 1491

Answers (3)

Mauricio Soares
Mauricio Soares

Reputation: 3640

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.

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36438

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>

Upvotes: 1

epascarello
epascarello

Reputation: 207511

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>

Upvotes: 1

Related Questions