我创建了一个充满切片图像的表格,这些图像应该组合在一起以创建完整图像,并在单页面上创建产品订单表单。
尽管从可靠资源中获取代码,但确认框,表单计算和打开/关闭窗口(链接到外部页面)功能仍无法正常工作。
切片图像表也没有显示,尽管我的老师坚持javascript可以独立创建图像而无需用HTML编写表格。
有人可以帮助指出我的错误来源并解释他们为什么会这样做吗?
//FORM CALCULATION BUTTON
function multiplyBy() {
"use strict";
var num1;
var num2;
num1 = document.getElementById("quantity").value;
num2 = document.getElementById("price").value;
document.getElementById("totalPrice").innerHTML = num1 * num2;
}
// FORM CONFIRM BOX
function Submit() {
"use strict";
var number;
var r = Submit("Item Discription: Red Bowl\nQuantity: 1\nPrice:
$225 .00\ nTotal Price: $300 .00\ nPress the OK button to confirm!");
if (r === true) {
number = "Your order has been confirmed";
} else {
number = "Your order has been cleared";
}
document.getElementById("orderForm").innerHTML = number;
}
//FOOTER- OPEN AND CLOSE FORM WINDOW
var myWindow;
function openWin() {
"use strict";
myWindow =
window.open("members_order.html", "_blank",
"width=980, height=1000");
}
function closeWin() {
"use strict";
myWindow.close();
}
//SLICED IMAGES
var numRows = 4;
var numCols = 5;
var showTable = "";
for (var j = 0; j < numRows; j++) {
showTable += "<tr>";
for (var i = 0; i < numCols; i++) {
showTable += "<td><img src='images/bcpot002_r";
showTable += (j + 1);
showTable += "_c";
showTable += (i + 1);
showTable += ".jpg'/></td>";
}
showTable += "</tr>";
}
document.writeln(showTable);
&#13;
<script src="Scripts/Script.js"></script>
<!--FORM-->
<form id="orderForm" action="members_order.html" onsubmit="return submit()" method="get">
<tr>
<th>Item Discription:</th>
<td colspan="2"><input type="text" id="discription" name="discription" value="Red Bowl" size="30"></td>
</tr>
<tr>
<th>Quantity:</th>
<td><input type="number" id="quantity" name="quantity" value="1"></td>
<th>Price:</th>
<td><input type="number" id="price" name="price" value="225.00"></td>
<td><input type="button" onClick="multiplyBy()" value="Calculate Total" /></td>
</tr>
<tr>
<th>Total Price:</th>
<td><input type="number" id="totalPrice" name="totalPrice" value="225.00"></td>
</tr>
<tr>
<td><input type="reset" onClick="reset()" value="Clear" /></td>
<td><input type="submit" onClick="Submit()" value="Submit" /></td>
</tr>
</form>
</table>
<!--WINDOW BUTTONS-->
<button type="button" onClick="closeWin()">Close Order Page</button>
<button onclick="openWin()"></button>
&#13;