HTML style display abhängig von einer JS-Variable

cumulonimbus8 · 21. Juli 2016

Hallo!

In einer HTML seien 10 Abschnitte (DIV) die anhand je einer berechneten JS-Variable angezeigt werden sollen (sichtbar sein sollen) oder nicht.
<div style="display:none">Das wird nicht zu sehen (praktisch gar nicht da) sein.</div>
<div style="display:inline">Das hier kann man lesen.</div>

Also dachte ich none bzw. inline per Variable einzuschleusen… Angeregt durch dieses Rezept:

Code:

<script type="text/javascript">
<!--
function Schreibe(Zeichen) {
 document.write(Zeichen);
}
-->
</script>
Lorem ipsum <script type="text/javascript">Schreibe(IchBinEineVariable);</script> dolor min.

Aber das klappt nicht im DIV-Tag da das ja ein Tag und kein Fließtext ist.

Irgendwie habe ich einen Knoten in der Leitung. Wie bekomme ich denn ein Konstrukt wie (sinngemäß) dieses hin?
<div style="display:IchBinEineVariable">Das wird eventuell sichtbar sein.</div>

Bzw. wie mache ich per ganz anderem Ansatz abhängig von einer per JS befüllten Variable einen ganzen Abschnitt bei Bedarf unsichtbar?

CN8

HansDampf38 · 21. Juli 2016

Hallo,
ich bin noch nicht so sicher, ob ich verstanden habe, worauf du hinaus willst, aber das sollte bei einer Lösung helfen:

Code:

document.getElementById("myDIV").style.display = "none";

Sprich, du gibst den DIV-Container eine ID, fragst über JS deine Variable in einer IF Abfrage ab und ordnest die entsprechene DIV dann zu was du willst.

Gruß

HD

coolmodi · 21. Juli 2016

Kannst es ja mit

document.getElementById('.deinDiv').style.display="none";

versuchen. Einfach allen divs die gleiche Klasse geben und dann in einer JS funktion none oder inline setzen.

Edit: Da war einer schneller

cumulonimbus8 · 21. Juli 2016

Hmmm…
Das wären IF-Konstruktionen. (Der Programmierer in mir sagt da gleich, dass man gefälligst ganz ordentlich none und inline mit If-Else explizit zuweisen müsste; dass das none ja reicht ist natürlich offensichtlich.)

Dehnen wir das mal aus.
document.getElementById('.deinDiv').style.display="none";
würde ich am liebsten nach meinem Plan (statt in einem IF) direkt steuern…
document.getElementById('.deinDiv').style.display=VARIABLE;
Geht das? Die Variable mit none oder inline zu beladen ist einfach.

Am liebsten täte ich das gleich in einer Schleife, gedanklich gemäß
for(j=1; j<=10; j++) {
document.getElementById('DIVNUMMER'+j).style.display=VARIABLE[j];
}
Geht auch so was? Im Vorfeld würde ich ohnehin mit einem 2-dimensinalen Array arbeiten, damit böte sich der Zählindex direkt an.

CN8

HansDampf38 · 21. Juli 2016

Theoretisch würde das natürlich gehen, nur weiß ich noch immer nicht, was das werden soll.

Denn so hättest du, bzw. müsstest du der Variable

Code:

document.getElementById('DIVNUMMER'+j).style.display=VARIABLE[j];

Display-Style 10 "Zustände" zuweisen. Es gibt zwar für den Style so viele, nur wenn ich dich richtig verstanden habe, willst du nur 2... Zeigen oder Nicht Zeigen.

Wenn ich das richtige verstehe

1. Du hast 10 Div-Container
2. Du führst eine Aktion aus
3. Daraus resultiert eine Variable
4. Ja nach Variable soll eine oder mehrere der DIV-Container angezeigt werden und die anderen nicht

Richtig ?

Gruß

HD

cumulonimbus8 · 21. Juli 2016

Danke der Syntax - ich habe zwischenzeitlich ein wenig gespielt

Code:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
var IDs = ["A", "B", "C"];
var Vis = ["none", "inline", "inline"];
var i = 0;
function Schreibe(Zeichen) {
 document.write(Zeichen);
}
function Schalten() {
 for(i=0;i<=2;i++) {
  document.getElementById(IDs[i]).style.display=Vis[i];
  document.getElementById("M"+(i+1)).style.display=Vis[i];
 }
}
-->
</script>
-----<br>
<div id="A">Lorem ipsum iohanni <script type="text/javascript">Schreibe(IDs[0]);</script> dolor min.<br></div>
<div id="B">Lorem ipsum iohanni <script type="text/javascript">Schreibe(IDs[1]);</script> dolor min.<br></div>
<div id="C">Lorem ipsum iohanni <script type="text/javascript">Schreibe(IDs[2]);</script> dolor min.<br></div>
-----<br>
<div id="M1">Lorem ipsum iohanni <script type="text/javascript">Schreibe(IDs[0]);</script> dolor min.<br></div>
<div id="M2">Lorem ipsum iohanni <script type="text/javascript">Schreibe(IDs[1]);</script> dolor min.<br></div>
<div id="M3">Lorem ipsum iohanni <script type="text/javascript">Schreibe(IDs[2]);</script> dolor min.<br></div>
-----<br>
<script type="text/javascript">Schalten();</script>
</body>
</html>

1. Du hast 10 Div-Container
Ich habe eine noch größere Anzahl als 10 die in gewisser Verschachtelung zu handhaben sind. →

2. Du führst eine Aktion aus
→ Nicht ganz, aber mittels OnLoad im BODY-Tag löse ich die Aktionen aus →

3. Daraus resultiert eine Variable
→ die (so weit war ich momentan) ein Array befüllt. So ein Array als direkte Schalter wäre handlicher. Nach obigem Muster im Spoiler wird es etwas unhandlicher.

4. Ja nach Variable soll eine oder mehrere der DIV-Container angezeigt werden und die anderen nicht
Exakt. Jede Array-Variabel soll eine Flagge sein die eine Sichtbarkeit schaltet. (Sagen wir mal eine Gruppe umfasse 3 Teilnehmer. Jeder Teilnehmer kann zur Anzeige qualifiziert sein. Ist es allerdings keiner muss auch die Gruppe selbst der Unsichtbarkeit anheim fallen.)

Damit kann ich erst mal basteln. Nochmals ein Dankeschön gegen den Knoten in der Leitung. getElementById kannte ich ja eigentlich…

CN8

cumulonimbus8 · 23. Juli 2016

-- Mittlere Verzweiflung --

Der Code im Spoiler oben funktioniert. Auch die Verwendung von Variablen.

Hier knallt es vor dem «X»:

Code:

function Zeigen() {
 for (i=1; i<=FR; i++) {
  IdNam = "TR"+i;
  alert(IdNam+" = "+Gitter[i][0]);
  document.getElementById(IdNam).style.display=Gitter[i][0];
  alert("X");
}

Auch das geplante
document.getElementById("TR"+i).style.display=Gitter[0];
rummst an der selben Stelle.

Schreibe ich aber Klartext
document.getElementById("TR1").style.display=Gitter[0];
funktioniert es.

Da es im Spoiler funktioniert kapiere ich hier gar nichts mehr. Wie bekomme ich die ID zu greifen?

CN8

John Reese · 23. Juli 2016

Was meinst du mit "hier knallt es..."? Gibt es in der Fehlerkonsole eine Fehlermeldung? (Strg + Shift + J im FF)

Könnte daran liegen, dass du dein i von 1 an zählst, Arrayindizes aber bei 0 beginnen:

Code:

function Zeigen() {
    for (var i = 0; i < FR; i++) {
        IdNam = "TR" + (i + 1);
        alert(IdNam + " = " + Gitter[i][0]);
        document.getElementById(IdNam).style.display = Gitter[i][0];
        alert("X");
    }
}

cumulonimbus8 · 23. Juli 2016

OK, es knallt weniger etwas als dass beim Aufruf der HTML JS dort ganz leise abstürzt.

Der Indexzähler ab 1 ist in Ordnung so und beabsichtigt; Gitter[0] z.B. verwendet bewusst dort (auch) die Null.

Der Absturz passiert nur wenn ich eine Variable dort einsetze, bei hartcodiertem String funktioniert es.

Um auch den Aspekt anzusprechen, der hier (zufällig passend) behandelt wird: Das Skript steht unterhalb aller mit ihrer ID versehenen Elemente.

CN8

John Reese · 23. Juli 2016

Was sagt die Fehlerkonsole?
Was meinst du mit abstürzen?

Gitter[0] geht nur, wenn Gitter.length == FR + 1 gilt.

cumulonimbus8 · 23. Juli 2016

Es gibt keine Fehlerkonsole - sonst hätte ich sie vielleicht sogar erwähnt. Und mich womöglich über eine Meldung glücklich geschätzt.

Abstürzen heißt, dass sich ein Programm(ablauf) (von selbst) beendet.

Ich lasse die HTML parsen, bis 1 Zeile (zufällig im JS-Block darin) vorher funktioniert es, ein alert() 1 Zeile darunter kommt nicht. So was nenne ich schon ewig einen Absturz ohne Fehlermeldung…

Gitter[0] geht nur, wenn Gitter.length == FR + 1 gilt.

Warum das so ist darfst du uns getrost erklären.
Ich kann ein Array Gitter[1][0] konstruieren wo FR==1 gilt und in der Zählschleife i nur 1 annimmt. Dann funktioniert es immer noch. Wenns dich glücklich macht, FR wird auf 6 festgelegt, die zweite Dimension dynamisch zwischen 4 (ergo 5 Elemente) und 7. Und alles Zählerische und Inhaltliche flutscht.

Lösung
Ich habe außerhalb meiner Beispiele einen Fehler geschossen.
document.getElementById("IRGENDEINE").style.display="none";
Das korrekt Gegenstück lautet
document.getElementById("IRGENDEINE").style.display="inline";
was zu setzen ist, auch wenn das der Standard ist.

Um die Übersicht beim Lesen zu erhalten habe ich Gitter[m][n] "yes" zugewiesen statt "inline". Warum JS so selektiv mal das parst und sich weghängt und mal durchläuft will ich, glaube ich, gar nicht wissen. Jedenfalls war das Problem weg nachdem ich yes in inline änderte.

CN8

John Reese · 23. Juli 2016

cumulonimbus8 schrieb:
Es gibt keine Fehlerkonsole - sonst hätte ich sie vielleicht sogar erwähnt. Und mich womöglich über eine Meldung glücklich geschätzt.
Abstürzen heißt, dass sich ein Programm(ablauf) (von selbst) beendet.

Wie, es gibt keine Fehlerkonsole? Wenn, wie du schreibst, das alert() nicht kommt, dann liegt das daran, dass du garantiert einen Fehler hast und er vorm alert() abbricht (oder er gar nicht zum alert() kommen würde, aufgrund bspw. einer Abbruchbedingung).

Bzgl. deines Arrays: Ein häufiger Fehler sind Off-By-One-Fehler. Daher dachte ich, deine Variable FR könnte womöglich einen größeren Wert haben, als dein Array "Gitter".

cumulonimbus8 · 24. Juli 2016

Wohlan…
In einer JS-Datei möge stehen:

Code:

function MachMal() {
 alert("Meldung1");
 alert();
 bubu
 alert("Meldung2");
}

Ich lade in meiner HTML die erwähnte JS und rufe dann die Function auf. Es kommt eine Meldungsbox [alert()-Box] die «Meldung1» ›sagt‹, nach Weiterklicken eine gänzlich leere und dann (nach Weiterklicken) stürzt JS sang-und-klanglos ab, ich sehe dann die HTML vor mir. Keine Fehlerkonsole!

Wo soll man die denn in welchen Testumgebungen haben? Editor, Browser, Ende-Gelände - aber keine Fehlerkonsole.

CN8

thecain · 24. Juli 2016

Fehlerkonsole = F12 im Chrome z.b.

falls ihr nicht das selbe darunter versteht

Jesterfox · 24. Juli 2016

cumulonimbus8 schrieb:
Um die Übersicht beim Lesen zu erhalten habe ich Gitter[m][n] "yes" zugewiesen statt "inline". Warum JS so selektiv mal das parst und sich weghängt und mal durchläuft will ich, glaube ich, gar nicht wissen.

Falls doch kannst du mal nach "Quirks Mode" und dessen Auswirkungen und auch wie man ihn triggert suchen... ob man es *wirklich* wissen will bezweifel ich aber ;-) versuch einfach immer den richtigen Doctype im HTML zu haben und Alle standardkonform umzusetzen. Spart Nerven ;-)

Was die Fehlerkonsole angeht: eigentlich jeder moderne Browser hat sowas. Beim Edge komm ich per F12 ran.

Suche

cumulonimbus8

Fleet Admiral

HansDampf38

Lt. Junior Grade

coolmodi

Lt. Commander

cumulonimbus8

Fleet Admiral

HansDampf38

Lt. Junior Grade

cumulonimbus8

Fleet Admiral

cumulonimbus8

Fleet Admiral

John Reese

Lt. Commander

cumulonimbus8

Fleet Admiral

John Reese

Lt. Commander

cumulonimbus8

Fleet Admiral

John Reese

Lt. Commander

cumulonimbus8

Fleet Admiral

thecain

Ensign

Jesterfox

Legende

Ähnliche Themen