JS-如何根据输入值设置div的宽度和高度？

aroundsix 发表于 Dev

六周围

因此，我要使用JavaScript创建一个盒子，然后要使用两个表单输入来设置盒子的宽度和高度，一个用于宽度，另一个用于高度。我似乎无法实现这一目标。

这是HTML代码：

<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>

这是JS代码：

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

当我手动设置宽度和高度时，似乎工作正常，但是当我尝试从输入中获取宽度和高度时，似乎无法正常工作。我是JS的新手，所以我们将不胜感激。

毛里西奥·苏亚雷斯

我可能会同意@epascarello的回答，但我不会返回false，而是使用 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();
});

使用preventDefault将阻止事件beeing的默认行为，即表单提交。

您也可以将其与链接和其他内容一起使用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。