Optellen waardes <p>
Ik heb een aantal <P>'s die adhv de invoer van de gebruiker berekend worden. Nu wil ik graag uiteindelijk de waarde's van de <P>'s bij elkaar optellen.
Ik wil dat doen via een button "Bereken Totaal" en dan alle waardes dus optellen shown.
Enige probleem, hoe tel ik waardes op die in HTML staan? Overigens zijn het wel allemaal getallen.
Gewijzigd op 10/02/2012 10:34:32 door John Cena
zoiets als dit in samen werking met jQuery:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="numers">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
Code (php)
1
2
3
4
5
6
2
3
4
5
6
var total = 0;
var elements = $('#numbers').children('p');
for (i = 0; i < elements.length; i++) {
total += parseInt($(elements[i]).html());
}
var elements = $('#numbers').children('p');
for (i = 0; i < elements.length; i++) {
total += parseInt($(elements[i]).html());
}
Ik heb dit niet getest
Gewijzigd op 10/02/2012 11:16:27 door Joakim Broden
Chi Lion op 10/02/2012 10:28:04:
Overigens zijn het wel allemaal getallen.
En nu heb je weer P met tekst? Beetje raar.
Als er P's met tekst tussen staan dan kun je toch kijken of de HTML van de P numeric is? Zo ja dan op tellen, Zo nee dan niet optellen. Of je kunt gaan werken met classes op de P die opgeteld moeten worden.
var elements = $('#numbers').children('<p class="rekenUit">');
zoiets?
Toevoeging op 10/02/2012 11:13:34:
Hmm, hij gaat hierop fout overigens:
children('<p>'); daar gaat ie bij mij fout op. alleen children() werkt wel
Oftewel
var elements = $('#numbers').children('.rekenUit');
Wat betreft children('<p>');, foutje van mij waarschijnlijk moet dat children('p'); zijn.
Gewijzigd op 10/02/2012 11:16:00 door Joakim Broden
natuurlijk.... dat had je zelf ook kunnen bedenken als je al met JQuery werkt
$("#berekenButton").click(function() {
var total = 0;
var elements = $('#numbers').children('.rekenUit');
for (i = 0; i < elements.length; i++) {
total += parseInt($(elements).html());
}
alert(total);
})
De alert geeft 0, en da hoort nie
total += parseInt($(elements).html());
doe je het elke keer op hetzelfde JQuery object. Zo loop je natuurlijk niet door alle elementen heen.
structuur, (en dan de hele shit weer afsluiten uiteraard) kan het daar aan liggen?
Vooorzetje?
Code (php)
1
alert(elements.length);
Code (php)
1
console.log(elements.length);
Dan kun je zien wat elements.length terug geeft, als je 0 terug krijgt zijn er dus geen children (wat wss zo is omdat je eerst nog een form, table, tr, td hebt, als dit het geval is moet je even op jQuery each zoeken).
Als je wel een getal krijgt behalve 0, gaat er dus iets mis tijdens het optellen van de getallen. En dat kan kloppen want je doet steeds
Code (php)
1
total += parseInt($(elements).html());
elements is een array dus het moet
Code (php)
1
elements[i]
Gewijzigd op 10/02/2012 11:44:45 door Joakim Broden
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#berekenButton").click(function() {
var total = 0;
var el = $("#numbers tbody");
var elements = el.children();
elements.each(function(n){
var el = $(this);
var leng = el.children('td');
var para = leng.children('p');
for (i =0; i< para.length; i++){
var num = parseInt($(para[i]).html());
if(!isNaN(num)) {
if(isNaN(total)) {
total = num;
}else {
total += num+0;
}
}
}
});
alert(total);
});
var total = 0;
var el = $("#numbers tbody");
var elements = el.children();
elements.each(function(n){
var el = $(this);
var leng = el.children('td');
var para = leng.children('p');
for (i =0; i< para.length; i++){
var num = parseInt($(para[i]).html());
if(!isNaN(num)) {
if(isNaN(total)) {
total = num;
}else {
total += num+0;
}
}
}
});
alert(total);
});
Gewijzigd op 10/02/2012 12:12:31 door John Cena
Let vooral op de selector, op wat je hier zet $(...)
Een javascript selector kan je aanspreken zoals je een css selector aanspreekt.
Bv. $('#numbers td p')
Dit zal elke <p> aanspreken die binnen een <td> zit die op zijn beurt binnen iets met id="number" zit.
Je kunt het simpel uittesten door in css de zelfde selector een stijl te geven.
bv.
Code (php)
1
2
3
2
3
#numbers td p {
background-color: #ffff00;
}
background-color: #ffff00;
}
Als je ziet dat alle p's, die je wil aanspreken, geel zijn geworden, weet je dat jQuery die zelfde elementen zal aanspreken, in de volgorde waarin ze in de code voorkomen.
Eventueel moet je je selector "strenger" of "losser" maken, door bv. classes toe te voegen.
Dat wordt dan in een array gezet.
Gewoon een 1-dimentionele array. Geen .children, ... gewoon 1 for-loop
Ik denk dat dit doet wat je wil.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
$("#berekenButton").click(function() {
var total = 0;
var my_p_elements = $('#numbers td p'); // Vooral hier moet je op letten.
var numberOfP = my_p_elements.length;
for (var i =0; i< numberOfP; i++) {
var value = parseInt($(my_p_elements[i]).html());
if (false == isNaN(value)) {
total += value;
}
}
alert(total);
});
});
$("#berekenButton").click(function() {
var total = 0;
var my_p_elements = $('#numbers td p'); // Vooral hier moet je op letten.
var numberOfP = my_p_elements.length;
for (var i =0; i< numberOfP; i++) {
var value = parseInt($(my_p_elements[i]).html());
if (false == isNaN(value)) {
total += value;
}
}
alert(total);
});
});
Gewijzigd op 10/02/2012 16:01:37 door Kris Peeters
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
$("#berekenButton").click(function() {
var total = 0,
my_p_elements = $('#numbers td p'); // Vooral hier moet je op letten.
my_p_elements.each(function() {
var value = ~~($(this).html());
if (false === isNaN(value)) {
total += value;
}
});
alert(total);
});
});
$("#berekenButton").click(function() {
var total = 0,
my_p_elements = $('#numbers td p'); // Vooral hier moet je op letten.
my_p_elements.each(function() {
var value = ~~($(this).html());
if (false === isNaN(value)) {
total += value;
}
});
alert(total);
});
});