Schaltfläche Ändert die endgültigen Kosten/Wert

Question

Ich habe nur wenige Schaltflächen erstellt, und wenn ich klicke, möchte ich die endgültigen Kosten beeinflussen, funktioniert aber nicht so, wie es sein sollte. Die Schaltfläche hat einen Wert und der Endwert der Kosten funktioniert nicht. Kann mir jemand sagen, was ich falsch mache?

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>

Aber wenn ich eine auswählen, wird der Endpreis nicht perfekt funktionieren. zeigt eine andere Nummer an! Kann mir jemand helfen?

Answer 1

Hängen Sie das Klickereignis an alle Schaltflächen an und fügen Sie die Kosten bei jedem Klick hinzu, wie im folgenden Ausschnitt dargestellt.

HINWEIS: Wenn Sie die Kosten nur einmal durch Schaltfläche hinzufügen möchten können Sie die Taste sofort nach dem Klick deaktivieren mit:

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

Hoffnung, das hilft.

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

ich Ihren Code angepasst haben diese Arbeit unter

Hinweis siehe den nachstehend i-IDs zu den Produkttasten hinzugefügt haben.

<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> 

Dann i Code

// 
// 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; 

modifiziert Und hier können Sie das Endergebnis

https://jsfiddle.net/64v3n1se/

skalieren dies sehen würden Sie die Click-Handler mit einer Klasse hinzufügen und eine Schleife, aber für Einfachheit habe ich ... einfach gehalten.

Answer 3

Da Sie während Ihrer Berechnung alle Werte der Schaltfläche erhalten und addieren sie so, wenn die Schaltfläche geklickt wird, berechnen Sie die Summe der Werte der Schaltflächen.

Ihre Art zu denken ist, soweit ich das beurteilen kann, falsch.

Sie können Ihren HTML-Code und Skript-Code wie folgt ändern.

Mit dieser Methode übergeben wir Objekt der Schaltfläche an die Funktion und wir erhöhen die globale Gesamtvariable innerhalb der Funktion. Später änderst du das Dom.

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

Und das Objekt der Schaltfläche im HTML-Pass mit

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