wissenwill: hilfe bei dynamisierung

SELF-Forum

hilfe bei dynamisierung

wissenwill
– Informationen zu den Bewertungsregeln

Hallo,

bräuchte mal einen kleinen Anstoss zwecks Dynamisierung eines kleinen Scripts.

Erstmal das Script:

<script language="javascript">

var flds  = "chk1,chk2,chk3,chk4".split(",")
var vals  = new Array(2,4,8,16)
var msgs  = new Array();

msgs[0]   = 'Nichts ausgewählt';

msgs[2]   = '1 checked';

msgs[4]   = '2 checked';
msgs[6]   = '2 & 1 checked';

msgs[8]   = '3 checked';
msgs[10]  = '3 & 1 checked';
msgs[12]  = '3 & 2 checked';
msgs[14]  = '3 & 2 & 1 checked';

msgs[16]  = '4 checked';
msgs[18]  = '4 & 1 checked';
msgs[20]  = '4 & 2 checked';
msgs[22]  = '4 & 2 & 1 checked';
msgs[24]  = '4 & 3 checked';
msgs[26]  = '4 & 3 & 1 checked';
msgs[28]  = '4 & 3 & 2 checked';
msgs[30]  = '4 & 3 & 2 & 1 checked';

function chkBoxProc (fld) {
  var val = 0;

for (i=0;i<flds.length;i++) {
    val += (fld.form.elements[flds[i]].checked)?vals[i]:0;
  }
  document.getElementById ('msg').innerHTML = msgs[val];

}
</script>
<form>
<input type="checkbox" name="chk1" onClick="chkBoxProc(this)">1<br />
<input type="checkbox" name="chk2" onClick="chkBoxProc(this)">2<br />
<input type="checkbox" name="chk3" onClick="chkBoxProc(this)">3<br />
<input type="checkbox" name="chk4" onClick="chkBoxProc(this)">4<br />

<span id="msg">Nichts ausgewählt</span>

</form>

Ich möchte das Script um sechs weitere checkboxen erweitern, aber mit der Methode wie oben dargestellt komme ich nicht wirklich weiter, das es einfach zu viele verschiedene Kombinationsmöglichkeiten gibt, ich brauche aber eben genau diese Ausgabe und da weiß ich grad ma gar nicht so richtig weiter.

Wer kann mir helfen das Script ein wenig dynamischer zu machen?
Gibt es zusätzlich noch die Möglichkeit die Array-Werte gegen html-code zu ersetzen? - Möchte darin noch weitere Formularelemente (checkboxen) integrieren.

Danke und Gruß
 -w

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. hilfe bei dynamisierung

    globe Homepage des Autors
    – Informationen zu den Bewertungsregeln

    n'abend,

    du machst dir das Leben ganz schön schwer ;)

    bräuchte mal einen kleinen Anstoss zwecks Dynamisierung eines kleinen Scripts.

    Du erkennst das Muster in deinen Ausgabestrings?

    var output = '';  /* Puffer für unseren Ausgabetext */  
for( var i = 0; i < fields.length; i++ ) /* alle Checkboxen durchlaufen */  
{  
  if( fields[i].checked ) /* wenn Checkbox aktiv */  
  {  
    if( output != '' ) output += ' &amp; '; /* wenn bereits Boxen aktiviert sind muss durch ein & verbunden werden */  
    /* &amp; deshalb, weil du innerHTML verwendest und das &-zeichen (ampersand) unbedingt als entität auftauchen möchte */  
    output += (i+1); /* informatiker zählen ab 0, normalsterbliche ab 1 ;) */  
  }  
}  
alert( output + ' checked' );

    es wird davon ausgegangen, dass fields ein Array ist und jedes Element eine Referenz auf eine deiner Checkboxen enthält. (Eine Referenz auf ein Objekt ist das was bei bspw. document.getElementById('blubb'); bekommst)

    Gibt es zusätzlich noch die Möglichkeit die Array-Werte gegen html-code zu ersetzen? - Möchte darin noch weitere Formularelemente (checkboxen) integrieren.

    Was genau möchtest du denn erreichen? natürlich kannst du HTML-Tags setzten, in deinem Code benutzt du ohnehin schon .innerHTML.

    objekt.innerHTML = '<strong>ich bin fett</strong>';

    (genau dafür ist innerHTML ja gedacht, für reinen text wäre innerText wohl der bessere Freund)

    weiterhin schönen abend...

    --
    Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
    sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. hilfe bei dynamisierung

    rfb
    – Informationen zu den Bewertungsregeln

    Probiers mal so:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Test</title>
    <script type="text/javascript">
    function chkBoxProc () {
    var flds=document.getElementById("checky").getElementsByTagName("input");
    var output="";
    for (var i=0;i<flds.length;i++) {
    if (flds[i].checked) output+=((output=="")?"":" & ")+(i+1);
    }
    document.getElementById("msg").firstChild.data=((output=="")?"Nix":output)+" checked";
    }
    </script>
    </head><body>
    <form id="checky">
    <input type="checkbox" name="chk1" onchange="chkBoxProc()">1<br />
    <input type="checkbox" name="chk2" onchange="chkBoxProc()">2<br />
    <input type="checkbox" name="chk3" onchange="chkBoxProc()">3<br />
    <input type="checkbox" name="chk4" onchange="chkBoxProc()">4<br />

    <span id="msg">Nichts ausgewählt</span>

    </form>
    </body>
    </html>

    Wie du siehst kannst du auf den größten Teil deiens Codes verzichten, da JavaScript (durch Zugriff auf die HTML-Knoten und effektive Schleifen) sich die Infos selbst zusammenbasteln kann.

    Bei der Ausgabe zählt dies Script einfach die input-Elemente durch und speichert direkt im output-String die gecheckten. Lässt sich also beliebig erweitern!

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln