Despite checking thoroughly, the console remains empty. I came across this code in a video tutorial where it worked perfectly.
Below is the simple code that I am currently using:
function addItem() {
inames = []
iqtyp = []
iprice = []
inames.push(document.getElementById('pname').value);
iqtyp.push(parseInt(document.getElementById('pqty').value));
iprice.push(parseInt(document.getElementById('price').value));
displayCart();
}
function displayCart() {
cartdata = '<table><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th></tr>';
total = 0;
for (i = 0; i < inames.length; i++) {
total += iqtyp[i] * iprice[i]
cartdata += "<tr><td>" + inames[i] + "</td><td>" + iqtyp[i] + "</td><td>" + iprice[i] + "</td><td>" + iqtyp[i] * iprice[i] + "</td><td><button onclick='delElement(" + i + ")' >Delete</button></td></tr>"
}
cartdata += '<tr><td></td><td></td><td></td><td>' + total + '</td></tr></table>'
document.getElementById('cart').innerHTL = cartdata;
}
function delElement(a) {
inames.splice(a, 1);
iqtyp.splice(a, 1)
iprice.splice(a, 1)
displayCart()
}#frm {
padding: 20px;
border: 2px solid;
}
#cart {
margin-top: 30px;
padding: 20px;
border: 2px solid;
background: lightgreen;
z-index: -100;
}
th,
td,
tr {
border: 1px solid;
}<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width">
<title> Cinematic </title>
<script src="shoppingcart.js"></script>
<link href="shoppingcart.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='frm'>
<label>Product Name</label>
<input id='pname' type='text'><br>
<label>Quantity</label>
<input id='pqty' type='number'><br>
<label>Unit Price</label>
<input id='price' type='number'><br>
<button onclick="addItem()"> Add Item </button>
</div>
<div id='cart'></div>
</body>
</html>No output from the console is appearing, leaving me puzzled.