Gesamtsummenberechnung funktioniert nicht :(

[shephard]

Hallo zusammen!

Bei meinem Programm werden vom User in ein Formular gewisse Werte eingetragen. Diese sollen dann
in einer Tabelle unterhalb des Formulars eingefügt werden, was auch soweit funktioniert.
Jedoch sollte auch einmal die Gesamtsumme von den Kalorien und den Trainingsdauer gemacht werden, womit ich aber meine Probleme habe

Anstatt das die Gesamtsumme der Kalorien berechne wird zB einfach für jeden neu erstellten Eintrag, ein Eintrag in der selben Zelle gemacht. Jedoch nichts addiert und auch nicht überschrieben.

Meine Zeile für die Gesamtsumme lautet: document.getElementById('kalor').innerHTML = document.getElementById('kalor').innerHTML + kalo;

Kann mir bitte jemand helfen wie ich das syntaktisch richtig formuliere?

<form name="form1" id="form_id" action="" onsubmit="return false;">
		 
		<div class="input-group">
			<span class="input-group-addon" id="ubung1">Übung</span>
			<input type="text" class="form-control" placeholder="Name der Übung" aria-describedby="einfaches-addon1" required>
		</div>
		<div class="input-group">
			<span class="input-group-addon" id="kalo"  aria-hidden="true">Verbrannte Kalorien [cal]</span>
			<input type="number" class="form-control" placeholder="Verbrannte Kalorien [cal] (Wert innerhalb von 1-2500)" aria-describedby="einfaches-addon1" required>
		</div>
		<div class="input-group">
			<span class="input-group-addon" id="time0"  aria-hidden="true">Beginn Datum/Zeit</span>
			<input type="datetime-local" class="form-control" placeholder="Beginn Datum/Zeit" aria-describedby="einfaches-addon1" required>
		</div>
		<div class="input-group">
			<span class="input-group-addon" id="time1"  aria-hidden="true">Ende Datum/Zeit</span>
			<input type="datetime-local" class="form-control" placeholder="Ende Datum/Zeit" aria-describedby="einfaches-addon1" required>
		</div>
			<input type="reset" value="Zurücksetzen"/>
			<input type="submit" value="Update!" onClick="updateTable();return false;"/>
	</form>

	
<p>
<table border='1'>
<thead><tr><th>Übung</th><th>Verbrannte Kalorien [cal]</th><th>Beginn Datum/Zeit</th><th>Ende Datum/Zeit</th><th>Trainingsdauer [min]</th></tr></thead>
<tbody id="editable"></tbody>
</table>
</p>
 
<p> 
 <table border='1'>
<thead><tr><th>Gesamtsumme Kalorien</th><th>Gesamtdauer Training</th></thead>
<tbody id="table2">
<tr>
         <td id="kalor" width='160'><center><input type='text' name='feld1' value=0></center></td>
         <td width='160'><center><input type='text' name='feld2' value=0 ></center></td>
</tr>
</tbody>
</table>
</p>

function updateTable(){
	 
	 var tabBody, row, cell, x, y, kalo;
     tabBody=document.getElementById("editable");
     row=document.createElement("tr");
     cell = document.createElement("td");
     cell.innerHTML=document.forms['form1'].elements[0].value;
     row.appendChild(cell);
	 
	 
	 cell = document.createElement("td");
	 if (kalo_is_valid(document.forms['form1'].elements[1].value)){
	  kalo=document.forms['form1'].elements[1].value
      cell.innerHTML=kalo;
	 }
     row.appendChild(cell);
	 
	 cell = document.createElement("td");
     cell.innerHTML=document.forms['form1'].elements[2].value;
	 x = new Date(document.forms['form1'].elements[2].value);
     row.appendChild(cell);
	 
	 cell = document.createElement("td");
     cell.innerHTML=document.forms['form1'].elements[3].value;
	 y = new Date(document.forms['form1'].elements[3].value);
     row.appendChild(cell);
	 
	 cell = document.createElement("td");
	 if (date_is_valid(x,y)){
		cell.innerHTML= (y - x) /1000/60;
	 }
     row.appendChild(cell);
	 
    tabBody.appendChild(row);
	
	
	document.getElementById('kalor').innerHTML = document.getElementById('kalor').innerHTML + kalo;
 }

 

[kkapsner]

.innerHTML liefert einen String zurück. Da das "+" auch der Operator für die Stringverknüpfung ist, wird die Zahl einfach hinten dran gehängt. Um den String in eine Zahl umzuwandeln musst du ihn durch parseFloat() jagen.

 

[shephard]

Ich habe das mal so umgeschrieben:

document.getElementById('kalor').innerHTML = parseFloat(document.getElementById('kalor').innerHTML) + kalo;

Jetzt bekomme ich immer die Ausgabe: NaN22
Wenn die Zahl kalo als letztes 22 war. Er summiert hier nichts auf sondern überschreibt diese nur, außerdem erkennt er den Wert von parseFloat(document.getElementById('kalor').innerHTML) als NaN.

Wie kann ich das lösen?

- - - Aktualisiert - - -

Ahh ich glaub ich hab das Problem gelöst, ich durfte die Tabelle nicht als <input> anlegen und den kalor wert ebenfalls noch in ein parsefloat() schmeißen und dann funktionierts

Danke für den Denkanstoß

 

[kkapsner]

Danke für den Denkanstoß

Bitte - gern geschehen.