JavaScript输出甲板平面图

Question

我是JavaScript新手。 我需要根据给定的甲板长度和宽度以及木板的长度和宽度，计算出需要多少板之后，输出甲板的平面图。 我的计算工作正常，但平面图未正确输出。 我应该在最后一个for循环中更改什么以输出计划？

例如，如果有16个x5英尺甲板的10个8x1英尺木板，则可能看起来像这样
-------- --------
-------- --------
-------- --------
-------- --------
-------- --------

我的代码如下。 我有一个for循环，它将根据板的长度为我提供“ ---”板。 在下面，对于尝试根据平台的宽度（deckWidth）和长度（deckLength）输出平面图，我感到难过。

 $(document).ready(function() { var deckArea; var boardArea; var numBoards; var total; var dLength; var dWidth; var bLength; var bWidth; var bPrice; var planBoard = ""; $("#deckLength").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { dLength = parseFloat(this.value); } }); $("#deckWidth").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { dWidth = parseFloat(this.value); } }); $("#boardLength").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { bLength = parseFloat(this.value); } }); $("#boardWidth").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { bWidth = parseFloat(this.value); } }); $("#boardPrice").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { bPrice = parseFloat(this.value); } }); $("#deckcalc").on("click", function () { numBoards = 0; total = 0; deckArea = dLength * dWidth; boardArea = bLength * bWidth; numBoards = deckArea/boardArea; total = numBoards * bPrice; //output total to screen $("#cost").text("$"+total.toFixed(2)); $("#boardsNeeded").text(numBoards); for(var y = 0; y < (bLength); y++) { planBoard += "-"; } for (var i = 0; i < dLength; i++) { "<br>"; for (var x = 0; x < dWidth; x++) { document.getElementById("plan").innerHTML = planBoard; } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>deck Length</label><input type="text" id="deckLength" /> <label>deck Width</label><input type="text" id="deckWidth" /> <label>board Length</label><input type="text" id="boardLength" /> <label>board Width</label><input type="text" id="boardWidth" /> <label>board Price</label><input type="text" id="boardPrice" /> <button id="deckcalc">calcit</button> <div id="plan"></div> 

Answer 1

在循环中，您每次都覆盖.innerHTML属性。 您可能想使用+=添加到属性中：

另外，如注释中所述，您还希望将<br />标签也添加到输出中。

 $(document).ready(function() { var deckArea; var boardArea; var numBoards; var total; var dLength; var dWidth; var bLength; var bWidth; var bPrice; var planBoard = ""; $("#deckLength").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { dLength = parseFloat(this.value); } }); $("#deckWidth").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { dWidth = parseFloat(this.value); } }); $("#boardLength").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { bLength = parseFloat(this.value); } }); $("#boardWidth").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { bWidth = parseFloat(this.value); } }); $("#boardPrice").keyup(function(){ if((isNaN(this.value) === false) && this.value !== "") { bPrice = parseFloat(this.value); } }); $("#deckcalc").on("click", function () { numBoards = 0; total = 0; deckArea = dLength * dWidth; boardArea = bLength * bWidth; numBoards = deckArea/boardArea; total = numBoards * bPrice; //output total to screen $("#cost").text("$"+total.toFixed(2)); $("#boardsNeeded").text(numBoards); for(var y = 0; y < (bLength); y++) { planBoard += "-"; } for (var i = 0; i < dLength; i++) { planBoard += "<br>"; for (var x = 0; x < dWidth; x++) { document.getElementById("plan").innerHTML += planBoard; } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>deck Length</label><input type="text" id="deckLength" /> <label>deck Width</label><input type="text" id="deckWidth" /> <label>board Length</label><input type="text" id="boardLength" /> <label>board Width</label><input type="text" id="boardWidth" /> <label>board Price</label><input type="text" id="boardPrice" /> <button id="deckcalc">calcit</button> <div id="plan"></div>