インクリメンタルリストアイテムを印刷するJavascript

Question

これはJavaScriptの問題ではありません。

JavaScript Dartboardスコアキーパーを作成しようとしています。インクリメンタルリストを印刷する問題が発生しました。ダーツボードの一部をクリックすると、スロー1、2、3が計算されます。問題は、これらのスローをインクリメンタルリスト形式で印刷したいのです。

HTML：

<button class="score-section" data-value="20" data-multiplier="1">20</button> 

<ul id="dartTotals"> 
    <li>Throw 1: {total}</li> 
    <li>Throw 2: {total}</li> 
    <li>Throw 3: {total}</li> 
</ul> 

はJavaScript

document.body.onclick = function(e){ 
    e = e.target; 
    if (e.className && e.className.indexOf('score-section') != -1) { 
    var i = 0; 
     (function increment(){ 
     document.getElementById('dartTotals').innerHTML += "<li> Throw " + ++i + ": " + " total </li>"; 
    }()); 
    } 
} 

私が行うことができました唯一の事はあるiに1を追加し、ちょうどアウトがiをインクリメントするとそのオフを印刷しておきます。または、forループを実行してリストを印刷しますが、一度に3回実行します。誰かが、クリックごとにこのインクリメンタルリストを作成する方法を示すのを手伝ってくれますか？前もって感謝します。

JSFIDDLE

更新：身体に

Updated Fiddle

機能がリセットを得ていたクリックします。移動しましたvar i、今はdartThrowと呼ばれ、期待どおりに機能しています。

var dartThrow = 0; 
document.body.onclick = function(e) { 
    e = e.target; 
    if (e.className && e.className.indexOf('score-section') != -1) { 

    (function increment() { 
     document.getElementById('dartTotals').innerHTML += "<li> Throw " + ++dartThrow + ": " + " total </li>"; 
    }()); 
    } 
} 

Answer 1

クリックごとに$ iを0に設定し、その値を増やしています。関数のスコープの外にある変数を実行するだけで、既に持っているコードで毎回適切にインクリメントする必要があります。 $ iがあなたが望むトータルスロー回数に達すると、リセットが必要になります。