输出甲板平面图的 JavaScript

Question

我是 JavaScript 新手。在给定甲板长度和宽度以及板的长度和宽度的情况下，我需要在计算需要多少板之后输出甲板的平面图。我的计算有效，但平面图输出不正确。我应该在输出计划的最后一个 for 循环中更改什么？

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

我的代码如下。我有一个 for 循环，它会根据电路板的长度给我一个“---”的电路板。在下面是我很伤心的 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>