Checkbox Werte einer Berechnung zuweisen

Hallo

Ich bin in JS noch nicht sehr bewandert, hatte jetzt aber versucht ein Berechnungsscript zu erstellen.

Das Problem für mich ist, das Script besteht aus verschiedenen Checkboxen und Texteingabefeldern.
Wie kann ich nun die gewählten Checkboxen in meinen Berechnung einfließen lassen?

zb: in Textfeld1 wird 3 eingegeben und die Checkbox6 wird angehackt (diese soll zb. den wert 10 haben) nun soll auf Knopfdruck oder über ein Autosumscript zb. 3 * 10 berechnet werden.
Nach etlichen Stunden Googlen und eigenen Versuchen komme ich nicht weiter.

Verkürztest Beispielscript:

Länge

Standardbreite

Vielen Dank für Eure Hilfe

Was sollen die styles-Werte hier ? Alles unwichtige hier weglassen !
Du solltest den Elementen Namen zuweisen (es geht auch ohne, aber weniger klar).
Damit kannst du dann wie mit Variablen arbeiten.
Also im HTML-Teil:

Und im Javascript-Teil:
with (document.forms[0]) {
Wert.value=Wert.value * x10.value;
}
(ohne with siehts so aus: document.forms[0].Wert.value=…)

Hallo,
Dank Dir für die schnelle Antwort.

Ich hab es jetzt nochmal neu versucht und zwei Möglichkeiten geschrieben.
Allerdings berechnet mir keine ein Ergebnis.
Ziel ist es ein Formular zu erstellen in welchem man länge und breite eingibt und über checkboxen auswählen kann was erledigt werden soll, zb Lackieren und/oder Grundieren.

Versuch1

// Kosten für eine Bezugseinheit
lacku = 5.95;
kratzu = 8.30;



function calc() {
var ergebnis = document.forms.kratzu.value + document.forms.lacku.value;}

Versuch2

// Kosten für eine Bezugseinheit
lack =20 ;
kratzer= 10 ;


if ( document.forms.checkbox\_1.checked == false) {lackErgebnis = 0 \* lack};
if ( document.forms.checkbox\_2.checked == false) {kratzErgebnis = 0 \* kratzer};
function calc()
{
var ergebnis =document.getElementById("länge") \* (lackErgebnis + kratzerErgebnis)
}

Wenn möglich sollten die Kosten für eine Bezugseinheit im Header oben änderbar sein ohne in die Formel gehen zu müssen.

Da sich kein Anderer deiner erbarmt, hier nochmal Kommentar von mir:

lacku = 5.95;
kratzu = 8.30;

Sollen das die Konstanten sein? Bitte mit var davor!
Und nicht auch als Name für input-Elemente verwenden.

function calc() {
var ergebnis = document.forms.kratzu.value +
document.forms.lacku.value;}

nicht forms, sondern forms[0], oder form mit Name-Attribut.
Funktion muss auch was liefern:
return ergebnis;

Checkbock mit onClick? Mach mal ein Button draus!
Und ohne „function“. Checkboxen sind nichts für Anfänger.
Müssen z.B. den gleichen Namen haben.

values?

Formularende erst nach letztem

Wo sind die Eingabefelder? Können auch für die Ausgabe verwendet werden, wie beim Taschenrechner.
Haben kein onClick, evtl. onChange.

Danke für dein Erbarmen!
Ich sitze schon den ganzen Tag dran.
Also ja es müssen leider checkboxen sein. Zudem soll der Javascript so gut es geht in externen .js Dateien stehen.

Der Erste Code war sicherlich aus Sicht eines Erfahrenes recht mies…

Ich bin jetzt so weit, die Eingabefelder für Länge, Breite und Tiefe stehen und werden auch live berechnet.
Die Checkboxen stehen auch und die jeweiligen values werden auch wenn checked übernommen.
Da es sich um drei Formeln handelt die entweder auf länge*breite oder (länge*breite)+(länge*tiefe) oder auf ((länge*breite)*03) basieren, habe ich drei einzelne .js erstellt.
Allerdings scheinen mir die Berechnungen nicht zu stimmen und ich habe es noch nicht hinbekommen die einzelnen werte als ganzes zusammen zurechnen.

In der Hoffnung das sich noch jemand findet der mir helfen kann, ohne die Hände über dem Kopf zusammen zu schlagen, hier der quelltext:
HTML Teil:

Das Problem hier ist ich bekomme complete1 und 2 und 3 nicht zusammen gerechnet.
Die Einzelnen Javascriptcodes:
autocalc.js

// JavaScript Document
function startCalc(){
 interval = setInterval("calc()",1);
}
function calc(){
 one = document.autoSumForm.lang.value;
 two = document.autoSumForm.breit.value; 
 three = document.autoSumForm.tief.value;
 ows = ((one \* 1) \* (two \* 1));
 uws = ((ows \* 1) + ((one \* 1) \* (((three \* 1 ) + 0.5))));
 document.getElementById('flaeche').value = (ows \* uws);
 }
 function stopCalc(){
 clearInterval(interval);
}

updateCost.js

// JavaScript Document
function UpdateCost() {
 var complete1 = 0
 var sum = 0;
 var gn, elem;
 for (i=0; i

updateCostO.js

// JavaScript Document
function UpdateCostO() {
 var complete2 = 0
 var sum = 0;
 var gn, elem;
 for (i=0; i
und <u>antislip.js</u>


    
    // JavaScript Document
    function AntiSlip() {
     var complete3 = 0
     var sum = 0;
     var gn, elem;
     for (i=0; i
    Wie gesagt die drei letzten scripte liefern nicht die korrekten werten.
    
    Tausend Danke im voraus
    Torsten

Jetzt scheint das Programm ja zu stehen.
Und sogar mit DOM-Elementen.
Aber wenns jemand nachprüfen soll, darfs keine 3 externen js haben.
Und das Hauptprogramm müsste auch vollständig sein.
Da ist dir wohl zur Ausbildung eine Aufgabe gestellt worden ?
Ich wundere mich über einige ungewönlichen Elemente.
Dass Clickbuttons angeklickt werden, wusste ich noch nicht.
Als ich schrieb, die Namen müssten gleich sein, hatte ich das mit Radiobuttons verwechselt.
Du schriebst statt ANGEKLICKT von ANGEHACKT, ist das der neue Begriff für Nutzer von Touchpads ?

Ok hier mal der Quelltext im ganzen:

\>head\>

//--"Live"berechnung der Flächen
function startCalc(){
 interval = setInterval("calc()",1);
}
function calc(){
var one = 0;
var two = 0;
var three = 0;
 ows = 0;
 uws = 0;
 atsl = 0;
 one = document.autoSumForm.lang.value;
 two = document.autoSumForm.breit.value; 
 three = document.autoSumForm.tief.value;
 ows = ((one \* 1) \* (two \* 1));
 uws = ((((0.5 + (three \* 1 )) \* (one \* 1)) + ((one \* 1) \* (two \* 1))));
 atsl = (0.30 \* ((one \* 1) \* (two \* 1)));
 gesamt = ((uws) + (ows));

 
//--In Dezimalstellen umwandeln
 function Dezimalstellen(num) {
if(isNaN(num))
num = "0";
Vorzeichen = (num == (num = Math.abs(num)));
num = Math.floor(num\*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents\<10)
cents = "0" + cents;
for (var i = 0; i \< Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4\*i+3))+','+
num.substring(num.length-(4\*i+3));
return (((Vorzeichen)?'':'-') + num + ',' + cents);
}
 ows1 = Dezimalstellen(ows);
 uws1 = Dezimalstellen(uws);
 atsl1 = Dezimalstellen(atsl);
 gesamt1 = Dezimalstellen(gesamt);
 


 document.getElementById('flaechegesamt').value = (gesamt1);
 document.getElementById('flaecheoberwasser').value = (ows1);
 document.getElementById('flaecheunterwasser').value = (uws1);
 document.getElementById('flaecheantislip').value = (atsl1);
 }
 function stopCalc(){
 clearInterval(interval);
}

//--Berechnung für das Unterwasserschiff
function UpdateCost() {
 var suma = 0;
 var gi, elem;
 for (i=0; i\<5; i++) {
 gi = 'service'+i;
 elem = document.getElementById(gi);
 if (elem.checked == true) { suma += Number(elem.value); }
 }
 document.getElementById('complete1').value = suma.toFixed(2);
} 

//--Berechnung für das Oberwasserschiff
function UpdateCostO() {
 var sumb = 0;
 var gn, elem;
 for (i=0; i\<4; i++) {
 gn = 'oservice'+i;
 elem = document.getElementById(gn);
 if (elem.checked == true) { sumb += Number(elem.value);}
 }
 document.getElementById('complete2').value = sumb.toFixed(2);

} 
//--Berechnung für den Antislip
function AntiSlip() {
 var sumc = 0;
 var gc, elemc;
 for (i=0; i\<1; i++) {
 gc = 'antislip'+i;
 elemc = document.getElementById(gc);
 if (elemc.checked == true) { sumc += Number(elemc.value); }
 }
 document.getElementById('complete3').value = sumc.toFixed(2);
 }

Unterwasser
Oberwasser
Antislip
Gesamtflaeche
Oberwasserflaeche
Unterwasserflaeche
Antislipflaeche

Die letzten Ausgaben dienen mit nur zur Kontrolle.
Die Frage ist halt nur noch wie bekomme zb den Wert aus id=„complete2“ multipliziert mit dem Wert aus id=„flaecheoberwasser“
das selbe mit den anderen, nur nach anderen gleichungen und wiederum aus allen ergebnissen eine gesamt summe.
Zu deiner Frage, ich mache das nicht aus Lerngründen, sondern weil ich auf meine Website ein Formular zur Serviceberechnung einbauen will.
Ja anhacken wäre wohl korrekter ausgedrückt^^
Liebe Grüße

Beispiele wären hilfreich
Habe jetzt mal getestet,
aber ohne Beispiel ist es schwer mit den ungeliebten Checkboxen.
Der Programmtext ist etwas lang und wird nicht ganz dargestellt,
ist aber wohl nicht so wichtig gewesen.