JS: Variable undefiniert

[medium22]

Hallo,


Die Fehlerkonsole gibt mir einen Fehler aus den ich so nicht verstehe.
Es geht darum, dass ich eine Select-Box mit einem JS-Array befüllen möchte. Zum füllen selbst hat Google nichts ausgespuckt sondern nur zum hinzufügen. Also dachte ich mir, ändere das einfache ein wenig ab und dann passt das schon.

JS:

for (i in sCm) { 
  var neu = sCm[i]["name"];
  NeuerEintrag = new Option(document.selc.neu.text, document.selc.neu.text, false, true);
  document.selc.serie.options[document.selc.serie.length] = NeuerEintrag; 
}

In 'sCm[i]["name"]' steht definitv etwas drin, das habe ich mir ausgeben lassen.

<form name="selc" action=""><select class="dpdw" name="serie"></select></form>

Und mal abgesehen davon, dass die Select-Box nicht befüllt wird (obs daran wohl liegt?!), lautet der Fehler aus der Konsole 'document.selc.neu is undefined'. Aber die habe ich doch definiert bzw. ihr etwas zugewiesen?

[h3ll]

Du verwendest die Variable neu nirgendwo. Mal davon abgesehen ist ein "var" in einer Schleife böse.

[AmicaNoctis]

Mal davon abgesehen ist ein "var" in einer Schleife böse.

Aber nur, wenn man diese Variable dann in einer schleifeninternen Funktion benutzen will, was ja hier nicht passiert.

Für Interessierte: Wenn doch, heißt h3lls „böse“ konkret nur, dass dann diese Variable vom letzten Wert der Zählvariable abhängt, weil zum Zeitpunkt des Aufrufens der Funktion die Schleife bereits durchgelaufen ist. Abhilfe schafft hier eine zusätzliche Closure-Funktion. Siehe https://developer.mozilla.org/en/Jav...common_mistake

Gruß,

Amica

[medium22]

Hallo,


Das die Variable bei jedem durchlauf in der Schleife überschrieben wir ist in meinen Augen nicht schlimm, der Inhalt dürfte zu dem Zeitpunkt längst ausgegeben worden und somit innerhalb der Schleife nicht mehr wichtig / notwendig sein.

Ich setze die Variable doch, so das sie dann später 'benutzt' werden kann - oder etwa nicht?

[AmicaNoctis]

Das die Variable bei jedem durchlauf in der Schleife überschrieben wir ist in meinen Augen nicht schlimm, der Inhalt dürfte zu dem Zeitpunkt längst ausgegeben worden und somit innerhalb der Schleife nicht mehr wichtig / notwendig sein.

Ich setze die Variable doch, so das sie dann später 'benutzt' werden kann - oder etwa nicht?

Eben. Wie gesagt, es wird nur zum Problem, wenn du diese Variable in einer schleifeninternen Funktion benutzt, was du aber nicht machst.

[medium22]

So meinte ich das ja auch.

Aber warum gibt mir die Konsole einen Fehler aus bzw. warum wird die das Select nicht gefüllt?

[wahsaga]

Und mal abgesehen davon, dass die Select-Box nicht befüllt wird (obs daran wohl liegt?!), lautet der Fehler aus der Konsole 'document.selc.neu is undefined'. Aber die habe ich doch definiert bzw. ihr etwas zugewiesen?

Nein, hast du nicht.
Du hast eine Variable neu deklariert - die steht aber mit document.selc.neu in keinerlei Zusammenhang.

Lesen bildet: SELFHTML: JavaScript / Objektreferenz / elements (Schema 4)

[h3ll]

Die Sache ist, JavaScript verschiebt alle Variablendeklarationen automatisch an den Funktionsanfang. Also aus

function foo(value) {
    if (value) {
        var bar = value;
    }
}

wird intern

function foo(value) {
    var bar;

    if (value) {
        bar = value;
    }
}

Erster Code würde den Eindruck erwecken, dass die Variable nur deklariert wird, wenn die if-Bedingung zutrifft. Dem ist aber nicht so. Sie wird auf jeden Fall deklariert. Wenn var in einer for-Schleife steht, würde man denken, dass bei jedem Durchgang eine neue Variable deklariert wird. Dem ist aber auch nicht so, weil analog zu vorigem Beispiel das var automatisch aus der Schleife geschoben wird.

Wenn man JavaScript sauber programmiert, schreibt man alle Variablendeklarationen an den Anfang der Funktion (also so, wie es JavaScript sowieso intern macht), damit erst gar keine Missverständnisse entstehen können.

Das meine ich mit "böse".

Noch ein Beispiel:

function foo1() {
    bar = 456;
    var bar = 789;
}

function foo2() {
    bar = 456;
}

var bar;

bar = 123;
foo1();
alert(bar);
// 123

bar = 123;
foo2();
alert(bar);
// 456

[medium22]

Hm.., ist ja ziemlich bescheuert, dieses Verhalten von Variablen - finde ich. Dennoch finde ich deine Erklärung ziemlich gut h3ll - danke! Nur.., irgendwie kann ich die Schleifen wenden und drehen, vertiefen, etc. im Endeffekt würde ich immer wieder an genau dem Problem hängen bleiben. Jedenfalls mit meinen JS-Kenntnissen..

Den verlinkten Hinweis von wahsaga habe ich nun auch mehrmals gelesen, verstehe jedoch nicht, auf welchen Zweig der (der Hinweis!) mich leiten soll - ist irgendwie alles Bahnhof. Warum ist das befüllen einer Select-Box in im Unterschied zu php hier so dermassen umständlich?!

[wahsaga]

Den verlinkten Hinweis von wahsaga habe ich nun auch mehrmals gelesen, verstehe jedoch nicht, auf welchen Zweig der (der Hinweis!) mich leiten soll

<form name="formular">
  <select name="xyz"> ... </select>
</form>

// Nonsense:
var foo = "xyz";
document.formular.foo // spricht ein Formularelement mit dem Namen foo an -> ist also nicht das gewünschte

// Beispiel von SELFHTML, mit etwas logischem Nachdenken kombiniert:
var foo = "xyz";
document.formular.elements[foo]   // ergibt „eingesetzt“, Variable durch ihren Wert ausgetauscht:
document.formular.elements["xyz"] // A-ha - sieht doch der Syntax aus dem Beispiel schon zum verwechseln ähnlich ...!

ist irgendwie alles Bahnhof.

Vielleicht wäre eine Modelleisenbahn auch das geeignetere Hobby für dich

[medium22]

for (i in sCm) {
  NeuerEintrag = new Option(sCm[i]["name"]);  
document.forms["selc"].elements["serie"].options[document.forms["selc"].elements["serie"].length] = NeuerEintrag; 
}

Das Problem lag weniger an der zweiten sondern viel mehr an der ersten Zeile innerhalb der Schleife... Danke.

Off-Topic

Vielleicht wäre eine Modelleisenbahn auch das geeignetere Hobby für dich

Okay! Deal! Aber nur wenn du dafür in den Zirkus gehst - mit roter Nase & Co.!

[mermshaus]

Habe das nicht großartig in älteren Browsern getestet, aber es ginge wohl auch so:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript">
        /*<![CDATA[*/

        window.onload = function () {
            var selectElem = document.getElementById('test'),
                options    = ['Germany', 'USA', 'France', 'Japan'],
                i          = null,
                optionElem = null;

            for (i in options) {
                optionElem = document.createElement('option');
                optionElem.value = parseInt(i) + 1;
                optionElem.text  = options[i];
                selectElem.add(optionElem, null);
            }
        };

        /*]]>*/
        </script>
    </head>

    <body>
        <form method="post" action="">
            <p>
                <select name="country" id="test">
                    
                </select>
            </p>
        </form>
    </body>

</html>

Gute Ressource für JavaScript: https://developer.mozilla.org/en/JavaScript

[medium22]

Zwischenfrage: Kann es sein, dass über innerHTML eingefügte Inhalte das CSS ignorieren?

Die Select-Box wird ja nun korrekt befüllt und bei einer änderung derer soll der dazugehörige Inhalt ausgegeben werden.

[wahsaga]

Zwischenfrage: Kann es sein, dass über innerHTML eingefügte Inhalte das CSS ignorieren?

Zwischenantwort: Nein.

Die Select-Box wird ja nun korrekt befüllt und bei einer änderung derer soll der dazugehörige Inhalt ausgegeben werden.

Aha. Und?

[medium22]

Zwischenantwort: Nein.

Anscheinend wohl doch..

Füge ich den entsprechenden Inhalt direkt in den Code ein (also nichts dynamisches, ..) ist alles stimmig. Wird er aber über innerHTML eingefügt werden genau die Teile des CSS nicht mehr interpretiert die dort drin sind.

Statisch:

<div id="sm_box2">
  <div><p><img src="s/a.gif" border="0"> Beschreibung A</p></div>
  <div><p><img src="s/b.gif" border="0"> Beschreibung B</p></div>
  <div><p><img src="s/c.gif" border="0"> Beschreibung C</p></div>
    </div>

Dynamisch:

<script type="text/javascript">
/* Teilauszug */
inhalt = "<div><p><img src='s/" + sCm[i]["sm"][x]["file"] + "' border='0'><br />" + sCm[i]["sm"][x]["name"] + "</p></div>";

/* */
document.getElementById('sm_box2').innerHTML = inhalt;
</script>
    <div id="sm_box2">
    </div>