【发布时间】：2017-03-13 17:29:48
【问题描述】：
我正在尝试编写一个网页，该网页使用 HTML 表单进行输入并通过文本框产生输出。输出和输入存储在一个二维 10x6 数组中。
该网页允许您创建一个存储在下一个数组行中的新销售/表格，查看上一个销售/表格（如果您是第一次销售，则环绕），并查看下一个销售/表格（如果您在最后一次销售/表格中，它会环绕）。
我的问题是我不知道如何增加两个变量来控制信息在数组中的存储位置，以及如何查看也环绕的上一个/下一个销售。
这是我的 JavaScript 代码：
"use strict"; // Use JavaScript in strict mode
// This function will reset all form values except
// for the Sale ID and sale count
function clearForm(){
document.getElementById('coffeeType').value = " ";
document.getElementById('coffeeSize').value = " ";
document.getElementById("subtotal").value = " ";
document.getElementById("salesTax").value = " ";
document.getElementById("total").value = " ";
}
// This function will execute when the user clicks the "New Sale"
// button, which will automatically clear the form and change the
// Sale ID and Sales Count values.
function newSale() {
// The sale count will depend on the length of the array
// Ex: if there are 2 rows ([0] and [1]), the length = 2, thus saleNum = 2
saleNum = salesInfo.length ;
// Reseting the form so the user can eneter new information
document.getElementById("coffeeForm").reset();
document.getElementById("saleID").value = 1000 + saleNum;
document.getElementById("salesCount").value = saleNum;
// Output the salesInfo array into the developer log
console.log(salesInfo);
}
// This function will be used in the previousSale() and nextSale()
// functions to output the previous or next sale into the HTML form
function getSale(saleNumber) {
document.getElementById('coffeeType').value = salesInfo[saleNum].coffeeType;
document.getElementById('coffeeSize').value = salesInfo[saleNum].coffeeSize;
document.getElementById("saleID").value = salesInfo[saleNum].saleID;
document.getElementById("subtotal").value = salesInfo[saleNum].subtotal.toFixed(2);
document.getElementById("salesTax").value = salesInfo[saleNum].salesTax.toFixed(2);
document.getElementById("total").value = salesInfo[saleNum].total.toFixed(2);
}
// This function will show the previous sale when the user clicks
// a button by decrementing/incrementing array values
function previousSale() {
// If the saleNum (salesInfo[index]) value is greater than zero, it will decrement
if (saleNum > 0) {
saleNum--;
}
// If the saleNum is at the oldest sale, it will show the newest sale
else if (saleNum == 0 && salesInfo.length > 1){
// Do something?
}
getSale(saleNum);
}
// This function will show the next sale when the user clicks
// a button by decrementing/incrementing array values
function nextSale() {
// If the saleNum (salesInfo[index]) value is greater than the array length, it will increment
if (saleNum < salesInfo.length - 1) {
saleNum++;
}
// If the saleNum is at the newest sale, it will show the oldest sale
else if (saleNum == salesInfo.length - 1){
// Do something?
}
getSale(saleNum);
}
// This function will verify user input and genereate errors if it is not accepted,
// otherwise is will store information in an array and perform calculations,
// and return output using an HTML form
function confirmForm() {
var coffeeType = document.getElementById('coffeeType').value.toUpperCase(),
coffeeSize = document.getElementById('coffeeSize').value.toUpperCase(),
saleID = document.getElementById('saleID').value;
// If the coffee type is not found in the price object ('L', 'B', or 'D'),
// generate an error and return false.
if (!price[coffeeType]) {
alert("Error: Please enter a valid coffee type (L - Light, B - Blend, D - Dark)!");
return false;
}
// If the coffee size is not found in the price object ('S', 'M', or 'L'),
// generate an error and return false.
if (!price[coffeeType][coffeeSize]) {
alert("Error: Please enter a valid coffee size (S - Small, M - Medium, L - Large).");
return false;
}
// Subtotal will vary depending on coffee type and coffee size, which uses an object
var subtotal = price[coffeeType][coffeeSize];
/* ****** Calculating the sales tax and total ****** */
var salesTax = subtotal * 0.06;
var total = subtotal + salesTax;
/* ************************************************* */
// Assigns salesInfo[saleNum] to salesInfo[saleNum] if it exists, or an empty object if it doesnt
salesInfo[saleNum] = salesInfo[saleNum] || {};
salesInfo[saleNum].saleID = saleID;
salesInfo[saleNum].coffeeType = coffeeType;
salesInfo[saleNum].coffeeSize = coffeeSize;
salesInfo[saleNum].subtotal = subtotal;
salesInfo[saleNum].salesTax = salesTax;
salesInfo[saleNum].total = total;
// Return the output to the user
getSale(saleNum);
return true;
} // end of confirmForm()
// Initializing global variables
var saleNum = 0;
// Using an object array to store coffee prices
var price = {
L: { S: 2.00, M: 2.80, L: 3.60 },
B: { S: 2.50, M: 3.00, L: 3.85 },
D: { S: 2.75, M: 3.20, L: 4.00 }
};
// Empty array that will contain sales information
var salesInfo = [];
// End of JavaScript
这是我的 HTML 代码：
<form id="coffeeForm">
<p>
<label>Sale ID:
<input type="text" name="saleID" id = "saleID" value = "1000" readonly>
</label>
<label>Sales Count:
<input type="text" name="salesCount" id = "salesCount" value = "1" readonly>
</label>
</p>
<p>
<label>Coffee Type (L - Light, B - Blend, D - Dark):
<input type="text" name="coffeeType" id = "coffeeTypeId">
</label>
</p>
<p>
<label>Coffee Size (S - Small, M - Medium, L - Large):
<input type="text" name="coffeeSize" id = "coffeeSizeId">
</label>
</p>
<p>
<!-- button that will execute javascript functions when clicked by the user, then return the output -->
<button onClick="confirmForm();return false;" class="button button1">Calculate</button>
</p>
<!--<div id="resultsDiv" style="display:none;">-->
<p>
<label>Subtotal:
<input type="text" name="subtotal" id="subtotal" style = "background-color: #FFFFC2;" readonly>
</label>
</p>
<p>
<label>Sales Tax:
<input type="text" name="salesTax" id="salesTax" style = "background-color: #FFFFC2;" readonly>
</label>
</p>
<p>
<label>Total:
<input type="text" name="total" id="total" style = "background-color: #F3E5AB;" readonly>
</label>
</p>
<p>
<!-- Somehow increment saleNum and saleID here after the form resets-->
<button onClick="resetForm();" class="button button1">New Sale</button>
<button onClick="previousSale();return false;" class="button button1">Previous Sale</button>
<button onClick="nextSale();return false;" class="button button1">Next Sale</button>
<input type="reset" value="Reset" class="button button1">
</p>
</form>【问题讨论】：
标签： javascript html arrays increment