2017-09-01 20 views
-1

控制檯完全是空的 - 我找不到錯誤。我在視頻教程和視頻中發現了這個代碼,它工作正常。控制檯不知道錯誤是什麼 - 也許是因爲onclick()方法?

這裏是我的簡單的代碼:

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>

控制檯不放棄任何東西了。

+0

「_The console is empty_」因爲代碼中沒有任何內容正在嘗試寫入控制檯。您希望將哪些代碼打印到控制檯,爲什麼? – csmckelvey

+0

像@csm_dev說,除非你使用'console.log()'JS不會告訴你什麼是錯的 – Ivan

+0

不,我的意思是控制檯沒有錯誤,但它不工作... – Mnktra

回答

0

這是一個錯字你沒有寫HTML正確,當您使用.innerHTMLdisplayCart()

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').innerHTML = 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; 
 
}
<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>

+0

謝謝!現在我覺得有點愚蠢的打擾你所有這一切。 :) – Mnktra

0

最後一行請更改行代碼

document.getElementById('cart').innerHTL = cartdata; 

document.getElementById('cart').innerHTML = cartdata; 

有沒有像innerHTL

0

你有一個錯字在你的displayCart功能。你沒有正確地拼寫HTML,它應該是

document.getElementById('cart').innerHTML = cartdata; 
相關問題