JS - 如何從輸入值設置div的寬度和高度？

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

我可能會用@ 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將阻止的默認行爲事件通過，這是表單提交。

你可以用鏈接和其他東西也使用它。

Answer 2

表單提交以便頁面刷新。您需要取消表單提交。

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 3

對我的作品有一個變化：增加return false;到處理程序，所以提交不通過，並重新加載頁面。

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>