首先，而不是尋找按鈕的onclick處理您的quantity變量，你必須引用的函數。原因是onclick需要一個函數，也稱爲事件處理函數或事件回調函數。
我們可以創建一個addItem()函數，增加quantity和另一個removeItem()減少它。然後，我們可以讓每個函數調用updateQuantity以使所有內容保持最新。請記住，我們應該努力保持我們的職能精益，並遵循單一責任原則。所以，你的代碼看起來是這樣的（我把它換成了document.write與console.log爲清楚起見，將解釋如何提高進一步下降）：
var price = 5;
var quantity = 0;
var lDiscountRate = 0.05;
var hDiscountRate = 0.1;
var total = 0;
function updateQuantity(){
var oldTotal = price * quantity;
var discountTotal = total * lDiscountRate;
if (oldTotal >= 10) {
console.log("you have a discount total was " + oldTotal + " total after discount " + total);
} else if (oldTotal >= 15) {
total = oldTotal * hDiscountRate;
console.log("you have a discount total was " + oldTotal + " total after discount " + total);
} else {
total = oldTotal;
console.log("you don't have a discount the total is " + total + "$");
}
}
function addItem() {
quantity++;
updateQuantity();
}
function removeItem() {
quantity--;
updateQuantity();
}
在這裏，我們已經做了一些重要的東西。首先，我們將您的處理邏輯轉移到自己的updateQuantity函數中，每次添加或刪除項目時都會運行它。這確保了數據將像您所描述的那樣保持「清爽」。另一個重要的事情是在功能內部移動oldTotal，以便在每次調用時都得到更新。我還聲明discountTotal你沒有聲明，並沒有在你的代碼中使用。
現在我們只需要將我們的處理函數addItem和removeItem綁定到DOM（您的按鈕）。我們可以將對函數的引用傳遞給onclick處理程序，或者我們可以使用事件偵聽器，這是一種更好的做法。一個事件監聽器將監聽一個規定的事件（在這個例子中爲'click'，然後執行一個函數），我們需要爲每個按鈕添加id，然後在我們的代碼中查找它們，我們將使用document.querySelector()來查找每個按鈕和存儲在一個變量，然後使用addEventListener方法，所有html元素必須添加偵聽器。
最後，我還將添加一個空的<div>在哪裏將打印我們的消息。使用document.write，而不是寫入html元素。爲此，我們還使用document.querySelector()來查找我們想要顯示結果的元素，然後將您的字符串添加到innerHTML屬性。
var messageDiv = document.querySelector('#results');
var price = 5;
var quantity = 0;
var lDiscountRate = 0.05;
var hDiscountRate = 0.1;
var total = 0;
function updateQuantity(){
var oldTotal = price * quantity;
if (oldTotal >= 10) {
var discountTotal = total * lDiscountRate;
messageDiv.innerHTML = "you have a discount total was " + oldTotal + " total after discount " + total;
} else if (oldTotal >= 15) {
total = oldTotal * hDiscountRate;
messageDiv.innerHTML = "you have a discount total was " + oldTotal + " total after discount " + total;
} else {
total = oldTotal;
messageDiv.innerHTML = "you don't have a discount the total is " + total + "$";
}
}
function addItem() {
quantity++;
updateQuantity();
}
function removeItem() {
quantity--;
updateQuantity();
}
var addButton = document.querySelector('#addButton');
var removeButton = document.querySelector('#removeButton');
addButton.addEventListener('click', function() {
addItem();
});
removeButton.addEventListener('click', function() {
removeItem();
});
最後，我們更新HTML位包括id每個按鈕和div打印我們的結果。請注意我們不再需要使用onclick屬性。
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Shopping</title>
<script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>
<div id="results"></div>
<button type="button" id="addButton">Add one item</button>
<button type="button" id="removeButton">Remove one item</button>
</body>
</html>
這裏有一個工作例子給你：http://jsbin.com/rejutudese/edit?html,js,output
你已經事件。我建議你使用功能。 – Bergi
'var quantity + 1'是一個語法錯誤 – Bergi
您的代碼只會運行一次，除非您另有說明。您是否瞭解了[函數]（https://www.w3schools.com/js/js_functions.asp）？您可能還需要檢查開發人員工具中的控制檯是否存在錯誤，因爲您的代碼正在生成一些錯誤。 [freeCodeCamp]（https://freecodecamp.com）是一個很好的學習資源。 – Gavin