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