Hinzufügen Preise zu meiner Auswahl von Optionen Javascript/html

Question

<label> 
 
\t Total 
 
\t <input value="£0.00" readonly="readonly" type="text" id="total"/> 
 
</label>

Im Folgenden sind die html und js für meine Website ich bin Gebäude. Ich versuche, die Werte in der Summe für das ausgewählte System zu erhöhen, dies wird 1 Element von den Optionsfeldern sein. Aber jedes Mal, wenn ich eine Option wähle, bleibt die Summe bei £ 0. Ich bin neu in js und ich habe Probleme. jede Hilfe würde geschätzt werden!

function totalIt() { 
 
    var input = document.getElementsByName("size"); 
 
    var total = 0; 
 
    for (var i = 0; i < input.length; i++) { 
 
    if (input[i].checked) { 
 
     total += parseFloat(input[i].value); 
 
    } 
 
    } 
 
    document.getElementById("total").value = "£" + total.toFixed(2); 
 
}

Small (£3.99)<input type="radio" name="size" id="s1" value="3.99" onclick="totalIt()"/> 
 
Medium (£4.99)<input type="radio" name="size" id="s2" value="4.99" onclick="totalIt()"/> 
 
Large (£5.99)<input type="radio" name="size" id="s3" value="5.99" onclick="totalIt()"/>

Answer 1

Ändern Sie diese document.getElementById("total").value = "£" + total.toFixed(2);

lesen

document.getElementById("total").innerHTML = "£" + total.toFixed(2);

Sie müssen innerHTML- verwenden, um den Bildschirm zu drucken. .value erhält den Wert dieses Elements.

Answer 2

Teil des Problems ist die fehlende #total Element (vermutlich eine input, da Sie versuchen, den Wert zu ändern).

Aber nach dem Namen der Funktion & Element zu urteilen, nehme ich an, Sie möchten auch total inkrementieren, wenn Sie auf einen der Radio-Eingänge klicken. Dazu müssen Sie Ihre total Variable nach außerhalb der Funktion verschieben, wodurch eine closure (d. H. Ihre total Variable wird seinen Wert zwischen den Aufrufen an totalIt() beibehalten). Beachten Sie, dass ich eine break hinzugefügt habe, da es nicht notwendig ist, die anderen Radioboxen zu überprüfen, sobald Sie Ihre überprüfte gefunden haben.

// Note this is outside the function 
 
var total = 0; 
 

 
function totalIt() { 
 
    var input = document.getElementsByName("size"); 
 
    for (var i = 0; i < input.length; i++) { 
 
    if (input[i].checked) { 
 
     total += parseFloat(input[i].value); 
 
     // exit loop once checked radio is found 
 
     break; 
 
    } 
 
    } 
 
    document.getElementById("total").value = "£" + total.toFixed(2); 
 
}

Small (£3.99)<input type="radio" name="size" id="s1" value="3.99" onclick="totalIt()"/> 
 
Medium (£4.99)<input type="radio" name="size" id="s2" value="4.99" onclick="totalIt()"/> 
 
Large (£5.99)<input type="radio" name="size" id="s3" value="5.99" onclick="totalIt()"/> 
 

 
<div> 
 
    Total <input type="text" readonly id="total" value="£0.00"/> 
 
</div>

Alternativ können Sie & lesen Sie den Wert von Ihrem input#total Element analysieren, falls es Gründe, warum Sie hier, um eine Schließung nicht verwenden können.

function totalIt() { 
 
    var input = document.getElementsByName("size"); 
 
    var total = parseFloat(document.getElementById("total").value.slice(1)); 
 
    for (var i = 0; i < input.length; i++) { 
 
    if (input[i].checked) { 
 
     total += parseFloat(input[i].value); 
 
     // exit loop once checked radio is found 
 
     break; 
 
    } 
 
    } 
 
    document.getElementById("total").value = "£" + total.toFixed(2); 
 
}

Small (£3.99)<input type="radio" name="size" id="s1" value="3.99" onclick="totalIt()"/> 
 
Medium (£4.99)<input type="radio" name="size" id="s2" value="4.99" onclick="totalIt()"/> 
 
Large (£5.99)<input type="radio" name="size" id="s3" value="5.99" onclick="totalIt()"/> 
 

 
<div> 
 
    Total <input type="text" readonly id="total" value="£0.00"/> 
 
</div>

In beiden der oben genannten Fällen brauchen Sie nicht tatsächlich Funkeingänge oder eine Schleife, da die Funkgeräte im Grunde sind wie Knöpfe handeln; Sie können sie einfach durch normale Schaltflächen ersetzen und totalIt() aufrufen (was sehr vereinfacht werden kann) mit einem Argument für den Betrag, um den erhöht werden soll.

Wenn Sie an einer laufenden Summe nicht interessiert sind und nur die Gesamtzahl der geprüften Elemente anzeigen möchten, suchen Sie wirklich nach einer Checkbox-Eingabe, und Sie müssen sich keine Sorgen machen über Verschlüsse, Parsing oder Pausen.

function totalIt() { 
 
    var input = document.getElementsByName("size"); 
 
    var total = 0; 
 
    for (var i = 0; i < input.length; i++) { 
 
    if (input[i].checked) { 
 
     total += parseFloat(input[i].value); 
 
    } 
 
    } 
 
    document.getElementById("total").value = "£" + total.toFixed(2); 
 
}

Small (£3.99)<input type="checkbox" name="size" id="s1" value="3.99" onclick="totalIt()"/> 
 
Medium (£4.99)<input type="checkbox" name="size" id="s2" value="4.99" onclick="totalIt()"/> 
 
Large (£5.99)<input type="checkbox" name="size" id="s3" value="5.99" onclick="totalIt()"/> 
 

 
<div> 
 
    Total <input type="text" readonly id="total" value="£0.00"/> 
 
</div>