如何获取javascript中的信息以显示在html中
下面的代码应该是用来制作购物车的。但是，我不确定如何将javascript转换为html（对不起，我不太知道如何描述它） 我试图让javascript构建一个表，其中包含项目的值，以及用于构建购物车的按钮。我最初浏览网页是为了找到如何做到这一点，并认为使用如何获取javascript中的信息以显示在html中,javascript,html,Javascript,Html,下面的代码应该是用来制作购物车的。但是，我不确定如何将javascript转换为html（对不起，我不太知道如何描述它） 我试图让javascript构建一个表，其中包含项目的值，以及用于构建购物车的按钮。我最初浏览网页是为了找到如何做到这一点，并认为使用document.getElementById（）.innerhtml可以工作，并在正文中引用它，但它似乎没有按预期的方式工作 <!DOCTYPE html> <html> <head> <ti
document.getElementById（）.innerhtml<!DOCTYPE html>
<html>
<head>
<title>
ACME Corp Shopping Cart
</title>
<link rel = "stylesheet" href = "shopstyle.css">
<script type = "text/javascript", language = "javascript">
alert("YAS");
var products = [];
var cart = [];
//label individual products below in individual lists, and then have the product put through the product_setup function
var product1 = ["Anvil", "Premium Grade Iron", 119.99];
var product2 = ["Female Roadrunner Costume", "Guaranteed to attract Male Roadrunners", 54.99];
function product_setup(product){
var productID = product[0];
var product_desc = product[1];
var qty = 1;
var price = product[2];
var newProduct = {
product_id: null,
product_desc: null,
product_qty: 0,
product_price: 0.00,
};
newProduct.product_id = productID;
newProduct.product_desc = product_desc;
newProduct.product_qty = qty;
newProduct.product_price = price;
products.push(newProduct);
}
product_setup(product1);
product_setup(product2);
function product_table() {
var html = "<table border = '1|1' >";
html += "<td>Product Name</td>";
html += "<td>Product Description</td>";
html += "<td>Price</td>";
html += "<td>Add to Cart</td>";
for (var i = 0; i < products.length; i ++) {
html += "<tr>";
html += "<td>" + products[i].product_name + "</td>";
html += "<td>" + products[i].product_desc + "</td>";
html += "<td>" + products[i].product_price + "</td>";
html += "<td>" + <button type = 'submit' onclick = 'addCart(products[i].product_name, this)'>Add to Cart</button> + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("location1").innerHTML = html;
}
product_table();
function addCart(product_id) {
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
var cartItem = null;
for (var k = 0; k < cart.length; k++) {
if (cart[k].product.product_id == products[i].product_id) {
cartItem = cart[k];
cart[k].product_qty++;
break;
}
}
if (cartItem == null) {
cartItem = {
product: products[i],
product_qty: products[i].product_qty
};
cart.push(cartItem);
}
}
}
renderCartTable();
}
function subtractQuantity(product_id)
{
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart[i].product_qty--;
}
if (cart[i].product_qty == 0) {
cart.splice(i,1);
}
}
renderCartTable();
}
function addQuantity(product_id)
{
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart[i].product_qty++;
}
}
renderCartTable();
}
function removeItem(product_id)
{
for (var i = 0; i < cart.length; i++) {
if (cart[i].product.product_id == product_id) {
cart.splice(i,1);
}
}
renderCartTable();
}
function renderCartTable() {
var html = '';
var ele = document.getElementById("location2");
ele.innerHTML = '';
html += "<table id='tblCart' border='1|1'>";
html += "<tr><td>Product ID</td>";
html += "<td>Product Description</td>";
html += "<td>Quantity</td>";
html += "<td>Price</td>";
html += "<td>Total</td>";
html += "<td>Action</td></tr>";
var GrandTotal = 0;
for (var i = 0; i < cart.length; i++) {
html += "<tr>";
html += "<td>" + cart[i].product.product_id + "</td>";
html += "<td>" + cart[i].product.product_desc + "</td>";
html += "<td>" + cart[i].product_qty + "</td>";
html += "<td>" + cart[i].product.product_price + "</td>";
html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty, 10) + "</td>";
html += "<td><button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/>Subtract Item</button>   <button type='submit' onClick='addQuantity(\"" + cart[i].product.product_id + "\", this);'/>Add Item</button>  <button type='submit' onClick='removeItem(\"" + cart[i].product.product_id + "\", this);'/>Remove Item</button></td>";
html += "</tr>";
GrandTotal += parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty, 10);
}
document.getElementById("location3").innerHTML = GrandTotal;
html += "</table>";
ele.innerHTML = html;
}
renderCartTable();
</script>
</head>
<body>
<br>
<p id="location1"> </p>
<br/>
<h2> Shopping Cart </h2>
<p id="location2"> </p>
<h2>Grand Total:</h2>
<p id="location3"> </p>
</body>
</html>
ACME公司购物车
警报（“YAS”）；
var乘积=[]；
var-cart=[]；
//在下面的各个列表中为各个产品贴上标签，然后让产品通过product_设置功能
var product1=[“铁砧”，“优质铁”，119.99]；
var product2=[“女性跑步者服装”，“保证吸引男性跑步者”，54.99]；
功能产品设置（产品）{
var productID=产品[0]；
var product_desc=产品[1]；
变量数量=1；
var价格=产品[2]；
var新产品={
产品标识：空，
产品描述：空，
产品数量：0，
产品价格：0.00，
};
newProduct.product_id=productID；
newProduct.product_desc=产品描述；
newProduct.product\u数量=数量；
newProduct.product\u price=价格；
产品。推送（新产品）；
}
产品设置（产品1）；
产品设置（产品2）；
函数乘积_表（）{
var html=“”；
html+=“产品名称”；
html+=“产品说明”；
html+=“价格”；
html+=“添加到购物车”；
对于（变量i=0；i