JavaScript输出甲板平面图

Question

我是JavaScript的新手。考虑到甲板的长度和宽度，以及板的长度和宽度，我需要计算出需要多少板的平面图。我的计算工作但平面图没有正确输出。在输出计划的最后一个for循环中我应该更改什么？

例如，如果一个16x5英尺的甲板上有10个8x1英尺的板，那么它可能看起来像这样 -------- --------
-------- --------
-------- --------
-------- --------
-------- --------

我的代码如下。我有一个for循环，它会给我一个＆＃34; ---＆＃34;根据电路板长度。根据甲板的宽度（deckWidth）和它的长度（deckLength），在下面是我试图输出它的平面图的悲伤循环。

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

此外，如评论中所述，您还希望将<br />标记添加到输出中。

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;