Javascriptが総

Question

をリセットここに私のJavaScriptのだ：

var total = 0, 
 
    bonus; 
 

 
function addToTotal(score) { 
 
    total += score; 
 
    document.getElementById("idiot").innerHTML = total; 
 
    if (bonus) { 
 
     total += score; 
 
     bonus = false; 
 
     document.getElementById("idiot").innerHTML = total; 
 
     } 
 
    }

<div id="undo" onclick="" class="col-md-3 col-xs-3 card"> 
 
    <img src="./resources/images/undo.png"> 
 
</div> 
 

 
<div id="reset" onclick="" class="col-md-3 col-xs-3 card"> 
 
    <img src="./resources/images/forest.png"> 
 
</div> 
 

 
<div id="total" class="col-md-3 col-xs-3 card total"> 
 
    <h2 id="score"></h2> 
 
    <p id="idiot"></p> 
 
</div>

私はそれが本質的に上記と同じだとして、HTMLの残りの部分をコピーする気はなく、値を保持している各1としませんでした。クリックすると、その値が合計に加算されます。ボーナスと呼ばれる別の変数があります。ボーナスは、次にクリックされるものの価値を実質的に2倍にします。

私はJavaScriptにはとても新しいので、この時点までは多くの試行錯誤がありました。しかし、私は次の2つのステップを理解できません。

1. クリックで合計を0にリセットします。
2. クリックの合計に最後に加えた値を元に戻します。

私は答えがおそらく本当に簡単だと知っていますが、私が試したすべての単純なことは動作していないようです。

助けていただけたら幸いです！

Answer 1

最後の値を配列に格納し、それをtotalとbonusの値に割り当てるために使用できます。

リセットするために、あなただけのfalseのように、falsy値にゼロとbonusへtotalを設定することができます。

は、内部情報：

• Objectにtotalとbonusの最後の値を格納するためのArray、

• Array#push配列の末尾に項目を追加するため、

• Array#pop配列の最後の項目を取得し、配列から削除するためです。すべての変更のため

• 、オブジェクトはドット表記で2 property accessorsのいずれかの使用

  { 
      total: 0, // or actual value 
      bonus: false // or true 
  } 
  

• この構造で保存され：

  bonus = l.bonus; 
  //  ^^^^^^  dot notation 
  
  bonus = l['bonus']; 
  //  ^^^^^^^^^ bracket notation 
  

• を移動させるようないくつかのマイナーな変更、

  document.getElementById("idiot").innerHTML = total; 
  

  to値を変更した後、関数の最後。

  と存在し、2つに最後の値を割り当てた場合、最後にストアオブジェクトを取る前者initalizing値とundoにすべての値を休止するために、最後の2つの新しい機能resetで

  bonus = false, 
  

• を初期化します変数。次に、ディスプレイを更新します。

var total = 0, 
 
    bonus = false, 
 
    last = []; 
 

 
function addToTotal(score) { 
 
    last.push({ total: total, bonus: bonus }); 
 
    total += score; 
 
    if (bonus) { 
 
     total += score; 
 
     bonus = false; 
 
    } 
 
    document.getElementById("idiot").innerHTML = total; 
 
} 
 

 
function reset() { 
 
    last.push({ total: total, bonus: bonus }); 
 
    bonus = false; 
 
    total = 0; 
 
    document.getElementById("idiot").innerHTML = total; 
 
} 
 

 
function undo() { 
 
    var l; 
 
    if (last.length) { 
 
     l = last.pop(); 
 
     bonus = l.bonus; 
 
     total = l.total; 
 
    } else { 
 
     bonus = false; 
 
     total = 0; 
 
    } 
 
    document.getElementById("idiot").innerHTML = total; 
 
}

Answer 2

合計をリセットしてリセットdivのonclickイベントと最後の追加を元に戻す関数を呼び出すことができます。これは最後に追加した値を保存する必要があるため、関数。これが唯一の1元に戻すために働く、あなたがより多くの（S）元に戻す行いたい場合は、リスト内の前の追加を格納し、合計からこれらを差し引いておく必要があります、このような何か：

var total = 0, lastValue =[]; 
 
var bonus; 
 

 
function addToTotal(score) { 
 
total += score; 
 
lastValue.push(score); //add score for undo in list. 
 
document.getElementById("idiot").innerHTML = total; 
 
if (bonus) { 
 
    total += score; 
 
    bonus = false; 
 
    document.getElementById("idiot").innerHTML = total; 
 
} 
 
} 
 

 
function resetTotal(){ 
 
    total = 0; 
 
    lastValue =[]; 
 
    console.log(total); 
 
} 
 
function undoLastAdd(){ 
 
    if(lastValue.length < 1) 
 
     return; 
 
    total -= lastValue[lastValue.length-1]; //subtract last addition from total 
 
    lastValue.splice(-1,1); //remove last addition from list as it has been subtracted from total 
 
}

<div id="undo" onclick="undoLastAdd()" class="col-md-3 col-xs-3 card"> 
 
    <img src="./resources/images/undo.png"> 
 
    </div> 
 

 
    <div id="reset" onclick="resetTotal()" class="col-md-3 col-xs-3 card"> 
 
    <img src="./resources/images/forest.png"> 
 
    </div> 
 

 
    <div id="total" class="col-md-3 col-xs-3 card total"> 
 
    <h2 id="score"></h2> 
 

 
    <p id="idiot"></p> 
 
    </div>

Answer 3

var total = 0, 
 
    node = document.querySelector("#idiot"), 
 
    bonus, 
 
    history = []; // save the last X total(s) 
 

 
function addToTotal(score) { 
 
    // If we need to add bonus add the score twice 
 
    history.push(total + score * (bonus ? 2 : 1)) 
 

 
    // and store it inside your history array 
 
    node.innerHTML = history[history.length-1]; 
 

 
    // reset the bonus flag 
 
    bonus = false; 
 
    } 
 

 
function reset() { 
 
    // Clear all previous history 
 
    history =[] 
 

 
    // Clear the total 
 
    total = 0; 
 

 
    // Update the HTML 
 
    node.innerHTML = 0; 
 
}

<div id="undo" onclick="" class="col-md-3 col-xs-3 card"> 
 
    <img src="./resources/images/undo.png"> 
 
</div> 
 

 
<div id="reset" onclick="" class="col-md-3 col-xs-3 card"> 
 
    <img src="./resources/images/forest.png"> 
 
</div> 
 

 
<div id="total" class="col-md-3 col-xs-3 card total"> 
 
    <h2 id="score"></h2> 
 
    <p id="idiot"></p> 
 
</div>