まず第一に、代わりにボタンのonclickハンドラでごquantity変数を探しているのは、関数を参照する必要があります。これは、onclickには、イベントハンドラまたはイベントコールバックとも呼ばれる関数が必要であるためです。
quantityを増やし、それを減らすものをremoveItem()とすると、addItem()関数を作成できます。次に、最新の情報を得るために各関数にupdateQuantityを呼び出すことができます。私たちは機能をリーンに保ち、単一責任の原則に従わなければならないことを覚えておいてください。だからあなたのコードは、この（私は明瞭のためにconsole.logでdocument.writeを交換してきましたし、そのさらに下に改善する方法を説明します）のようになります。
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ハンドラに渡すことも、イベントリスナを使うこともできます。これは、より良い方法です。イベントリスナーは指定されたイベント（この場合は）をリッスンし、それが発生したときに関数を実行します。idを各ボタンに追加してコード内で探します。document.querySelector()を使用しますすべてのhtml要素でリスナーを追加する必要があるaddEventListenerメソッドを使用してください。
最後に、メッセージを印刷する空の番号を<div>に追加します。 document.writeを使用し、代わりに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();
});
最後に、我々は、我々の結果を印刷するには、各ボタンのidとdivを含めるようにHTMLのビットを更新します。我々はもはや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
あなたは* *使用している：ここではサンプル（私は結果を表示するdiv要素を使用することに注意）がありますイベント。私はあなたが機能を使用することをお勧めします。 – Bergi
'var quantity + 1'は構文エラーです – Bergi
あなたのコードは、特に指示しない限り、一度だけ実行されます。 [functions]（https://www.w3schools.com/js/js_functions.asp）についてまだ学んだことがありますか？あなたのコードがいくつかを生成しているので、開発ツールのコンソールでエラーをチェックすることもできます。 [freeCodeCamp]（https://freecodecamp.com）は素晴らしい学習リソースです。 – Gavin