Miten lasketaan JavaScriptillä valittujen tiedostojen yhteiskoko?
Kokonaissumma-kenttä pysyy tyhjänä vaikka valitsisi kaikki checkbox-kohdat.
Hoksasin että summa-laskennat pitää lisätä ktoggle- ja utoggle-funktioihin, mutta miten?
Ei kai tässä tarvi käyttää mitään jquery tms. juttua. En haluaisi käyttää jquerya. Olen vain nähnyt tuosta jquerystä jotain esimerkkikoodia mutta en osaa sitä yhtään.
<html>
<head>
<title>Musiikkivalinta</title>
<style type="text/css">
td.thin0 {
background-color: e0e0e0;
border: 1px solid black;
}
td.thin1 {
background-color: ffffff;
border: 1px solid black;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
function totalsum(source)
{
var totalsize=0.0;
for (var i=0; i<3; i++)
{
totalsize=totalsize+(document.getElementsByName("koko[]").value);
}
document.getElementById("yhteiskoko").value=totalsize;
}
function ktoggle(source)
{
checkboxes = document.getElementsByName('kkappaleet[]');
for (var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = source.checked;
}
}
function utoggle(source)
{
checkboxes = document.getElementsByName('ukappaleet[]');
for (var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = source.checked;
}
}
</script>
<body>
<form name="m" method="post" action="">
<table>
<!-- Seuraava nappi on disabloitu väliaikaisesti. -->
<tr><td colspan="4"><input type="submit" name="submit" value="Lähetä valittujen kappaleiden lista" disabled></td></tr>
<tr><td colspan="4"><input type="checkbox" onClick="ktoggle(this)" /> merkitse kaikki kotimaiset kappaleet valituksi</td></tr>
<tr><td colspan="4"><input type="checkbox" onClick="utoggle(this)" /> merkitse kaikki ulkomaiset kappaleet valituksi</td></tr>
<tr><td colspan="3" align="right">Valittujen kappaleiden koko yhteensä (megatavua)</td><td><input type="text" class="yhteiskoko" id="yhteiskoko" size="6" value="" readonly ></td></tr>
<tr><td colspan="4"><h4>Musiikkilista</h4></td></tr>
<tr><td align="center" class="thin0">Nro</td><td class="thin0">Nimi</td><td align="right" class="thin0">Megatavua</td><td align="center" class="thin0">Valinta</td></tr>
<tr><td align="center" class="thin1">77.</td><td class="thin1">Kotimaa\Rauli Badding Somerjoki\05-Pilvet karkaa, niin minäkin</td><td align="right" class="thin1">2.5</td><td align="center" class="thin1"><input type="hidden" name="koko[]" value="2.5"><input type="checkbox" name="kkappaleet[]" value="Kotimaa\Rauli Badding Somerjoki\05-Pilvet karkaa, niin minäkin"></td></tr>
<tr><td align="center" class="thin0">80.</td><td class="thin0">Kotimaa\Rauli Badding Somerjoki\08-Paratiisi</td><td align="right" class="thin0">2.5</td><td align="center" class="thin0"><input type="hidden" name="koko[]" value="2.5"><input type="checkbox" name="kkappaleet[]" value="Kotimaa\Rauli Badding Somerjoki\08-Paratiisi"></td></tr>
<tr><td align="center" class="thin1">450.</td><td class="thin1">Ulkomaiset\All Woman 2003\CD 3\10_Blondie - Heart Of Glass</td><td align="right" class="thin1">8.4</td><td align="center" class="thin1"><input type="hidden" name="koko[]" value="8.4"><input type="checkbox" name="ukappaleet[]" value="Ulkomaiset\All Woman 2003\CD 3\10_Blondie - Heart Of Glass"></td></tr>
<tr><td align="center" class="thin0"> </td><td class="thin0">Kaikki yhteensä (megatavua)</td><td align="right" class="thin0">13.4</td><td align="center" class="thin0">3 kpl</td></tr>
</table>
</form>
</body>
</html>No ihan ensimmäisenä voisit korjata tuon dokumentin kunnolliseksi. Nythän siellä on useita elementtejä samalla id:llä. esim. Id="koko[]" löytyy kolmeen kertaan. Eihän selain voi tietää minkä noista haluat, kun pyydät sitä hakemaan getElementById("koko[]")
Tai sitten heivaa id:t mäkeen ja laita nuo nimiksi ( name="koko[]" ) jolloin voit käyttää getElementByName("koko[]") joka palauttaa kaikki tuolla nimellä olevat elementit.
Huomaa siis, että tuossa ensimmäisessä Element on yksikössä ja jälkimmäisessä Elements monikossa ihan siitä syystä että id on (pitäisi olla) yskilöivä ja sama name taas voi esiintyä moneen kertaan.
Muutettu rivit 21 ja 54-56.
totalsize=totalsize+(document.getElementsByName("koko[]").value);<tr><td align="center" class="thin1">77.</td><td class="thin1">Kotimaa\Rauli Badding Somerjoki\05-Pilvet karkaa, niin minäkin</td><td align="right" class="thin1">2.5</td><td align="center" class="thin1"><input type="hidden" name="koko[]" value="2.5"><input type="checkbox" name="kkappaleet[]" value="Kotimaa\Rauli Badding Somerjoki\05-Pilvet karkaa, niin minäkin"></td></tr> <tr><td align="center" class="thin0">80.</td><td class="thin0">Kotimaa\Rauli Badding Somerjoki\08-Paratiisi</td><td align="right" class="thin0">2.5</td><td align="center" class="thin0"><input type="hidden" name="koko[]" value="2.5"><input type="checkbox" name="kkappaleet[]" value="Kotimaa\Rauli Badding Somerjoki\08-Paratiisi"></td></tr> <tr><td align="center" class="thin1">450.</td><td class="thin1">Ulkomaiset\All Woman 2003\CD 3\10_Blondie - Heart Of Glass</td><td align="right" class="thin1">8.4</td><td align="center" class="thin1"><input type="hidden" name="koko[]" value="8.4"><input type="checkbox" name="ukappaleet[]" value="Ulkomaiset\All Woman 2003\CD 3\10_Blondie - Heart Of Glass"></td></tr>
Okei, no sitten seuraavaksi täytyy korjata seuraavat virheet:
1) totalsum -funktiota ei kutsuta mistään
2) totalsum -funktiossa on virheitä. Et voi sanoa lisätä totalsize muuttujaan document.getElementsByName("koko[]").value, koska document.getElementsByName("koko[]") palauttaa taulukon, eikä taulukolla ole value -arvoa. ktoggle ja utoggle funktioissa osaat ihan fiksusti käyttää taulukkoa, joten ota siitä mallia.
3) Jos ylipäätään laskisit yhteen kaikkien koko[] -nimellä olevien inputien arvot, niin tuloshan olisi aina sama riippumatta siitä mitä rukseja on valittuna. Eli käytännössä sinun täytyisi myös tarkistaa onko kokoa vastaava ruksi valittuna vai ei.
4) Nyt koon ja ruksivalinnan naittaminen on hieman hankalaa (ei toki mahdotonta) kun kappaleet on jaettu kahteen eri ryhmään (kotimaiset ja ulkomaiset) mutta koot on vain yksi yhtenäinen. Eli sinun täytyisi tietää että 3. koko vastaa 1. ulkomaista kappaletta. Itse tekisin koko syteemin ihan toisin, mutta tuolla tyylillä tehden yksi tapa olisi varmasti laittaa ulkomaiset ja kotimaiset koot erikseen (esim. ukoko[] ja kkoko[]).
Sinänsä yleisenä neuvona antaisin, että kannattaisi opetella ymmärtämään javascriptiä kunnolla. Nyt tuo näyttää tyypilliseltä leikkaa-liimaa -touhulta jossa tehdään paljon mutta ymmärretään vähän ja siihen korjaamiseen menee sitten enemmän aikaa kuin jos tekisi suoraan ajatuksen kanssa.
Muutettu javascript-kohtia ja musiikkikappaleiden rivit. Nyt toimii kuten tarkoitin.
function totalsum(source)
{
var totalsize=0.0;
k_checkboxes = document.getElementsByName('kkappaleet[]');
u_checkboxes = document.getElementsByName('ukappaleet[]');
k_yht=document.getElementsByName("kkoko[]");
u_yht=document.getElementsByName("ukoko[]");
for (var i=0; i<k_yht.length; i++)
{
if (k_checkboxes[i].checked)
{
totalsize=totalsize+1.0*(k_yht[i].value);
}
}
for (var i=0; i<u_yht.length; i++)
{
if (u_checkboxes[i].checked)
{
totalsize=totalsize+1.0*(u_yht[i].value);
}
}
totalsize=Math.round(totalsize*10)/10;
tmp=totalsize.toString();
if (tmp.includes(".")==false) { tmp=tmp+".0"; }
document.getElementById("yhteiskoko").value=tmp;
}
function ktoggle(source)
{
checkboxes = document.getElementsByName('kkappaleet[]');
for (var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = source.checked;
}
totalsum(source);
}
function utoggle(source)
{
checkboxes = document.getElementsByName('ukappaleet[]');
for (var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = source.checked;
}
totalsum(source);
}<tr><td align="center" class="thin1">77.</td><td class="thin1">Kotimaa\Rauli Badding Somerjoki\05-Pilvet karkaa, niin minäkin</td><td align="right" class="thin1">2.5</td><td align="center" class="thin1"><input type="hidden" name="kkoko[]" value="2.5"><input type="checkbox" onclick="totalsum(this)" name="kkappaleet[]" value="Kotimaa\Rauli Badding Somerjoki\05-Pilvet karkaa, niin minäkin"></td></tr> <tr><td align="center" class="thin0">80.</td><td class="thin0">Kotimaa\Rauli Badding Somerjoki\08-Paratiisi</td><td align="right" class="thin0">2.5</td><td align="center" class="thin0"><input type="hidden" name="kkoko[]" value="2.5"><input type="checkbox" onclick="totalsum(this)" name="kkappaleet[]" value="Kotimaa\Rauli Badding Somerjoki\08-Paratiisi"></td></tr> <tr><td align="center" class="thin1">450.</td><td class="thin1">Ulkomaiset\All Woman 2003\CD 3\10_Blondie - Heart Of Glass</td><td align="right" class="thin1">8.4</td><td align="center" class="thin1"><input type="hidden" name="ukoko[]" value="8.4"><input type="checkbox" onclick="totalsum(this)" name="ukappaleet[]" value="Ulkomaiset\All Woman 2003\CD 3\10_Blondie - Heart Of Glass"></td></tr>
Aihe on jo aika vanha, joten et voi enää vastata siihen.