ボタン最終的なコスト/値を変更します

Question

私はいくつかのボタンを作成しましたが、クリックすると最終的なコストに影響を与えたいと思います。ボタンには値があり、コストの最終値が機能しない、誰かが私に間違っていることを教えてもらえますか？

function totalIt() { 
 
    var input = document.getElementsByName("product"); 
 
    var total = 0; 
 
    for (var i = 0; i < input.length; i++) { 
 
    if (input[i].click) { 
 
     total += parseFloat(input[i].value); 
 
    } 
 
    } 
 
    document.querySelector(".priceText1").innerText = "$" + total.toFixed(2); 
 
}

<div class="priceWrapper"> 
 
    <h3 class="priceText1" id="total">$0.00</h3> 
 
    <h3 class="priceText2">Final Cost</h3> 
 
</div> 
 

 
<div class="item"> 
 
    <div class="itemProduct"> 
 
    <h4 class="itemText"> 
 
     <span class="no_selection">Logos</span> 
 
    </h4> 
 
    </div> 
 

 
    <div class="itemHidden"> 
 
    <form action="" id="theForm"> 
 

 
     <label> 
 
     <button class="buttonBg" name="product" value="25.00" type="button">Producto 3</button> 
 
     </label> 
 

 
     <label> 
 
     <button class="buttonBg" name="product" value="10.00" type="button">Producto 4</button> 
 
     </label> 
 

 
    </form> 
 
    </div>

しかし、私は1つを選ぶ際に、最終的な価格は完璧に動作しません。別の番号を表示しています！いくつか私を助けることができますか？

Answer 1

すべてのボタンにclickイベントをアタッチし、以下のスニペットのようにクリックごとにコストを追加します。

注：あなたはボタンによって、コストだけで1時間を追加したい場合は、使用してすぐにクリックした後にボタンを無効にできます。

this.setAttribute('disabled','disabled'); 

この情報がお役に立てば幸いです。

var products = document.querySelectorAll(".buttonBg"); 
 

 
for (var i = 0; i < products.length; i++) { 
 
    products[i].addEventListener("click", totalIt); 
 
} 
 

 
function totalIt() { 
 
    var total  = document.querySelector("#total"); 
 
    var currentVal = parseInt(total.innerText); 
 
    var new_val = parseInt(this.value); 
 
    
 
    if(this.classList.contains('clicked')){ 
 
    total.innerText = (currentVal - new_val).toFixed(2); 
 
    }else{ 
 
    total.innerText = (currentVal + new_val).toFixed(2); 
 
    } 
 
    
 
    document.querySelector("#total2").innerText = total.innerText; 
 
    
 
    this.classList.toggle('clicked'); 
 
}

.clicked{ 
 
    color: green; 
 
}

<div class="priceWrapper"> 
 
    <h3 class="priceText1">$<span id="total">0.00</span></h3> 
 
    <h3 class="priceText2">Final Cost</h3> 
 
</div> 
 

 
<div class="item"> 
 
    <div class="itemProduct"> 
 
    <h4 class="itemText"> 
 
     <span class="no_selection">Logos</span> 
 
    </h4> 
 
    </div> 
 

 
    <div class="itemHidden"> 
 

 
    <form action="" id="theForm"> 
 

 
     <label> 
 
     <button class="buttonBg" name="product" value="25.00" type="button">Producto 3</button>      
 
     </label> 
 

 
     <label> 
 
     <button class="buttonBg" name="product" value="10.00" type="button">Producto 4</button> 
 
     </label> 
 

 
    </form> 
 
    </div> 
 
    <h3 class="priceText1">$<span id="total2">0.00</span></h3>

Answer 2

私は、この作品は、私は、製品のボタンにidを追加したの下

ノートの下に表示させるようにコードを適応しています。

<div class="priceWrapper"> 
    <h3 class="priceText1" id="total">$0.00</h3> 
    <h3 class="priceText2">Final Cost</h3> 
</div> 

<div class="item"> 
    <div class="itemProduct"> 
    <h4 class="itemText"> 
         <span class="no_selection">Logos</span> 
        </h4> 
    </div> 

    <div class="itemHidden"> 

    <form action="" id="theForm"> 

     <label> 
     <button class="buttonBg" id="product1" name="product" value="25.00" type="button"> 
      Producto 3 
     </button> 
     </label> 

     <label> 
     <button class="buttonBg" id="product2" name="product" value="10.00" type="button"> 
      Producto 4 
     </button> 
     </label> 

    </form> 
    </div> 

その後、私はあなたがこのクラスを使用してクリックハンドラを追加するスケールに最終的な結果に

https://jsfiddle.net/64v3n1se/

を見ることができ、あなたのコード

// 
// this will be the element clicked so just add it, as below 
// 
function addProduct() { 
    el = this; 
    total += parseFloat(el.value); 
    total_el.innerText = "$" + total.toFixed(2); 
}; 
// 
// Cache your total get a reference to the total element (faster!) 
// when you write your code don't keep doing stuff when it can be done 
// once - speed is everything and as you write more complex stuff 
// doing it write from day one will pay off in your work (toptip) 
// 
var total = 0; 
var total_el = document.querySelector(".priceText1"); 
// 
// Bind up the click event 
// 
document.getElementById('product1').onclick = addProduct; 
document.getElementById('product2').onclick = addProduct; 

そして、ここを修正しており、ループですが、単純さのために私は...それを簡単に保ちました。

Answer 3

ボタンをクリックするたびにボタンの値の合計が計算されるため、計算中にすべてのボタンの値が取得されて追加されるためです。

あなたの考え方は今のところ、私が知る限り、間違っています。

このようにhtmlコードとスクリプトコードを変更することができます。

このようにして、buttonオブジェクトを関数に渡して、関数内のグローバル変数totalを増やします。後であなたはdomを変えます。

var total = 0; 
      function totalIt(obj) { 
       total = total + parseFloat(obj.value); 
       document.querySelector(".priceText1").innerText = "$" + total.toFixed(); 
      } 

そして

<button class="buttonBg" name="product" value="10.00" type="button" onclick="totalIt(this)">