Question

所以，我正在使用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很陌生，所以任何帮助都会非常感激。

Answer 1

表单提交，以便页面刷新。您需要取消表单提交。

＆＃13;

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

＆＃13;

div { background-color: #CFC; }

＆＃13;

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

＆＃13;

Answer 2

通过一次更改为我工作：将return false;添加到处理程序，因此提交不会通过并重新加载页面。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我可能同意@ epascarello的回答，但我没有回复假，而是使用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将阻止传递事件的默认行为，即表单提交。

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

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

3 个答案: