首先，而不是寻找按钮的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