Ich bekomme das DIV nicht auf display:none

[Roland]

Hallo,

ich bekomme das Div nicht weg. Eigentlich wollte ich es fiddeln, aber dort geht es. Nur im Original nicht und ich schaffe es nicht, es umzusetzen.

Ich habe eine Tabelle, innerhalb deren ich in einem td-tag eine Hauptzeile und bei Vorhandensein darunter noch 2-3 Zeilen habe. Also in etwa so:

<tr>  
<td>  
Hauptzeile  
Nebenzeile 1  
Nebenzeile 2  
</td>  
</tr>

Und davon habe ich ggf. Dutzende Tabellenzeilen (<tr-tags>).
Wenn ich nun den Bereich der beiden Nebenzeilen editierbar machen möchte, blende ich per JS eine Textaerea ein, in der als Defaultwert die beiden Nebenzeilen stehen. Folglich ist es nicht sinnvoll, diese beiden Nebenzeilen auch noch "im Original" zusätzlich einzublenden. Sie sollen also verschwinden.

Demnentsprechend habe ich sie in ein DIV gepackt, dieses mit display:'' versehen und will es per JS auf display:none stellen.

In php sieht das dann so aus:

if (!empty($row[12])) {  
echo ("<div id=\"".$row[8]."d1_nebenzeilen\" style=\"display:\"><br>".$row[12]."</div>");  
}  
  
...  
  
<img ... onclick=\"show('".$row[8]."d1','".$row[8]."d0')\">  
  
  

Und mein JS Code sieht dann so aus:

function hide_or_schow(a,b) {  
if (document.getElementById(a).style.display == 'none') {  
...  
document.getElementById(a+'nebenzeilen').style.display = 'none';  
} else {  
...  
document.getElementById(a+'nebenzeilen').style.display = '';  
}

Trotzdem verschwindet mein DIV nicht. Wenn ich in den Quelltext anstelle von display: ein display:none einsetze, dann erscheint es nicht. Also muß der Fehler im JS-Teil sein, ich finde ihn aber nicht.

Wer hilft mir weiter?

Roland

[Camping_RIDER]

Aloha ;)

Trotzdem verschwindet mein DIV nicht. Wenn ich in den Quelltext anstelle von display: ein display:none einsetze, dann erscheint es nicht. Also muß der Fehler im JS-Teil sein, ich finde ihn aber nicht.

Das liegt wohl daran, dass display: keine erlaubte Angabe ist. Wenn, dann musst du von display:none auf display:block oder display:iniline oder display:inline-block oder was auch immer wechseln, solange es sich um eine erlaubte Angabe handelt.

Problem schon gelöst oder muss ich mich tiefergehend einlesen?

Grüße,

RIDER

[Roland]

Hi Rider,

Problem schon gelöst oder muss ich mich tiefergehend einlesen?

Nein, das 'block' löst das Problem leider nicht.

Roland

[hotti]

Hallo,

Wenn ich nun den Bereich der beiden Nebenzeilen editierbar machen möchte, blende ich per JS eine Textaerea ein,

Evntl. wäre contenteditable was für solche Fälle.

in der als Defaultwert die beiden Nebenzeilen stehen. Folglich ist es nicht sinnvoll, diese beiden Nebenzeilen auch noch "im Original" zusätzlich einzublenden. Sie sollen also verschwinden.

Oder so: onClick => Zelle verwandelt sich in eine Textarea. onBlur => Textarea wird wieder zur Zelle.

Horst Zelle

[Roland]

Hi,

ich habe den Fehler gefunden, sehe aber derzeit nicht, warum er auftritt?

Funktionbiert nicht:

  
if (document.getElementById(a).style.display == 'none') {  
document.getElementById(a).style.display = '';  
document.getElementById(b).style.display = 'none';  
document.getElementById(a+'a_artikeltext').style.display = '';  
document.getElementById(b+'a_artikeltext').style.display = 'none';  
document.getElementById(a+'a_artikeltext_ori').style.display = 'none';  
} else {  
document.getElementById(a).style.display = 'none';  
document.getElementById(b).style.display = '';  
document.getElementById(a+'a_artikeltext').style.display = 'none';  
document.getElementById(b+'a_artikeltext').style.display = '';  
document.getElementById(a+'a_artikeltext_ori').style.display = '';  
}  

Funktioniert:

  
if (document.getElementById(a).style.display == 'none') {  
document.getElementById(a).style.display = '';  
document.getElementById(b).style.display = 'none';  
document.getElementById(a+'a_artikeltext').style.display = '';  
document.getElementById(a+'a_artikeltext_ori').style.display = 'none';  
document.getElementById(b+'a_artikeltext').style.display = 'none';  
} else {  
document.getElementById(a).style.display = 'none';  
document.getElementById(b).style.display = '';  
document.getElementById(a+'a_artikeltext').style.display = 'none';  
document.getElementById(a+'a_artikeltext_ori').style.display = '';  
document.getElementById(b+'a_artikeltext').style.display = '';  
}  

Ich habe also im 2. Code lediglich die letzte Zeile um eins nach oben verschoben.

Warum funktioniert das nun?

Roland

[ChrisB]

Hi,

Ich habe also im 2. Code lediglich die letzte Zeile um eins nach oben verschoben.

Warum funktioniert das nun?

Vielleicht weil die ehemals vorletzte, jetzt letzte Zeile einen Fehler auslöst, so dass die weitere Script-Abarbeitung stoppt … hast du mal in die Fehlerkonsole deines Browsers geschaut?

MfG ChrisB

[Roland]

Vielleicht weil die ehemals vorletzte, jetzt letzte Zeile einen Fehler auslöst, so dass die weitere Script-Abarbeitung stoppt … hast du mal in die Fehlerkonsole deines Browsers geschaut?

Danke für den Tip.
Das wäre tatsächlich eine nachvollziehbare Ursache des Problems...

Roland

[Mattes]

echo ("<div id="".$row[8]."d1_nebenzeilen" style="display:"><br>".$row[12]."</div>");

style="display:" ist zwar nicht dein Problem, aber Unsinn. Hast du, wie hier, keine Eigenschaftsangabe, dann lass' sie ganz weg.

<img ... onclick="show('".$row[8]."d1','".$row[8]."d0')">

Dieses vermischen von HTML und Javascript halte ich für fehlerträchtig und rate, es zu vermeiden. Außerdem bläht es den Code auf, und dies ganz gewaltig, wenn du davon "Dutzende" Einträge hast.
Solche Ereignisbehandlung kann man auch fein in DOMContentLoaded mit einer kleinen zweizeiligen Schleife an die Elemente pappen. Übersichtlicher als dieses PHP/HTML/Javascript-Kauderwelsch da oben ist das allemal.

Und mein JS Code sieht dann so aus:

function hide_or_schow(a,b) {
if (document.getElementById(a).style.display == 'none') {
...
document.getElementById(a+'nebenzeilen').style.display = 'none';

Das kann nicht funktionieren. Jetzt mal abgesehen davon, dass du offenbar vor einem ziemlichen Durcheinander sitzt – hier heisst deine Funktion mal show(), dann hide_or_schow() (mit Rechtschreibfehler), in deinem Nachschieber sind dann _nebenzeilen verschwunden, stattdessen taucht dort _artikeltext auf –:

Wenn du deine zu versteckenden Elemente row8d1_nebenzeilen nennst, wirst du sie in der show()-Funktion kaum mit row8d1nebenzeilen (ohne Unterstrich) ansprechen können.

Sollte es daran nicht liegen, was ja nicht unwahrscheinlich ist, wenn du in zwei Beiträgen schon drei verschiedene Versionen deines Codes präsentierst, dann prüfe javascriptseitig, welche Elemente greifbar sind. Du hast dein Verstecken von row8d1nebenzeilen zum Beispiel von row8d1 abhängig gemacht:

if (document.getElementById(a).style.display == 'none') {

Was gibt denn document.getElementById(ŕow8d1) aus? Prüfe mit console.log. Zumindest Firebug hat auch einen Javascript-Debugger eingebaut, in dem du Haltepunkte setzen und prüfen kannst, ob Variablen bzw. das DOM an diesen Stellen deinen Erwartungen entspricht.

[Gunnar Bittersmann]

@@Roland:

nuqneH

In php sieht das dann so aus:

Dein serverseitiger PHP-Code ist für ein clientseitiges Problem irrelevant. Poste den generierten HTML-Code!

if (!empty($row[12])) {

echo ("<div id="".$row[8]."d1_nebenzeilen" style="display:"><br>".$row[12]."</div>");
}

  
Aber wo der PHP-Code schon mal da ist: HTML-Tags sollten [niemals](https://forum.selfhtml.org/?t=219025&m=1510697) mit PHP `echo …;`{:.language-php} generiert werden. Nicht HTML in PHP schachteln, sondern andersrum: PHP in HTML:  
  
`<?php [code lang=php]if (!empty($row[12])):`{:.language-html} ?>  
  <div id="<?php `echo $row[8];`{:.language-php} ?>d1\_nebenzeilen"><br><?php `echo $row[12];`{:.language-php} ?></div>  
<?php `endif;`{:.language-php} ?>[/code]  
  
Was soll das `<br>`{:.language-html} dort? Für Abstände ist CSS da.  
  
  

> ~~~php

<img ... onclick=\"show('".$row[8]."d1','".$row[8]."d0')\">  

1. Da fehlt wohl was: echo …; und Stringbegrenzer.

2. s.o.

3. Das img-Element ist per Tastatur nicht anwählbar; die Interaktion ist für einige Nutzer nicht möglich. Man könnte zwar nachrüsten, das wäre allerdings Unfug. Mach einen Button daraus und registriere das click-Event für diesen!

<button onclick="show('<?php [code lang=php]echo $row[8]; ?>d1', '<?php echo $row[8]; ?>d0')"><img ...></button>[/code]

Qapla'

[Roland]

Hi,

Dein serverseitiger PHP-Code ist für ein clientseitiges Problem irrelevant. Poste den generierten HTML-Code!

Kannst Du das etwa nicht umsetzen? Hm, dann mach ich das demnächst für Dich.

<?php [code lang=php]if (!empty($row[12])): ?>
  <div id="<?php echo $row[8]; ?>d1_nebenzeilen"><br><?php echo $row[12]; ?></div>
<?php endif; ?>[/code]

Bitte? Das ist vollkommen unlesbar. Das mach ich nicht!
Mein Code ist solange besser, bis Du (oder wer auch immer) mir schlüssig erklärt, warum dem nicht so sein soll.

Was soll das <br> dort? Für Abstände ist CSS da.

Auch so ne Sache.
Es gäbe den <br> Tag nicht, wenn er unnötig wäre. Es gibt ihn aber. Also darf ich den auch benutzen!

3. Das img-Element ist per Tastatur nicht anwählbar; die Interaktion ist für einige Nutzer nicht möglich. Man könnte zwar nachrüsten, das wäre allerdings Unfug. Mach einen Button daraus und registriere das click-Event für diesen!

<button onclick="show('<?php [code lang=php]echo $row[8]; ?>d1', '<?php echo $row[8]; ?>d0')"><img ...></button>[/code]

Ok. Das sehe ich ein.

Roland

Qapla'

[Mattes]

Dein serverseitiger PHP-Code ist für ein clientseitiges Problem irrelevant. Poste den generierten HTML-Code!

Kannst Du das etwa nicht umsetzen? Hm, dann mach ich das demnächst für Dich.

Hochmut kommt vor dem Fall …

Mein Code ist solange besser, bis Du (oder wer auch immer) mir schlüssig erklärt, warum dem nicht so sein soll.

Wenn dein Code besser wäre, müsstest du nicht um Hilfe bitten und dir dann obendrein gesagt lassen bekommen, dass er schlecht lesbar wäre (und dies schon zum zweiten Mal).

[Roland]

Wenn dein Code besser wäre, müsstest du nicht um Hilfe bitten und dir dann obendrein gesagt lassen bekommen, dass er schlecht lesbar wäre (und dies schon zum zweiten Mal).

Du stellst eine nicht vorhandene Kausalität her. Und lesbar muß er doch für diejenigen sein, die ihn lesen. Also vor allem für mich! echo ("<div... ist für mich ganz vorzüglich lesbar.

Roland

[Der Martin]

Hi,

Wenn dein Code besser wäre, müsstest du nicht um Hilfe bitten und dir dann obendrein gesagt lassen bekommen, dass er schlecht lesbar wäre (und dies schon zum zweiten Mal).
Du stellst eine nicht vorhandene Kausalität her. Und lesbar muß er doch für diejenigen sein, die ihn lesen. Also vor allem für mich!

in dem Moment, wo du andere um Rat fragst oder um Hilfe bittest, muss er vor allem für die potentiellen Helfer lesbar sein. Es wäre also nur anständig von dir, wenn du den Code dann wenigstens allgemeingültigen Empfehlungen entsprechend aufbereiten würdest. Dazu gehört vor allem eine optische Gliederung, z.B. durch Einrückungen und sinnvoll eingesetzte Leerzeilen.

Ganz schlecht ist allerdings, wenn man schon eine unübersichtliche Code-Wüste hat und dann auch noch willige Helfer anpflaumt.

echo ("<div... ist für mich ganz vorzüglich lesbar.

In Ordnung. Ich habe auch ein paar von der Masse abweichende Ansichten, was gut lesbar ist und was nicht. Aber wenn ich die Masse frage, muss ich mich trotzdem ein bisschen danach richten. Solange dein Code wirklich nur für dich ist, kannst du ihn schreiben, wie du willst.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Roland:

nuqneH

Dein serverseitiger PHP-Code ist für ein clientseitiges Problem irrelevant. Poste den generierten HTML-Code! Kannst Du das etwa nicht umsetzen? Hm, dann mach ich das demnächst für Dich.

Ich kann das, aber ich will es nicht. Warum sollte jemand, der seine Zeit für dein Problem opfert, auch noch zusätzlich Zeit opfern, um PHP-Interpreter zu spielen?

Mein Code ist solange besser, bis Du (oder wer auch immer) mir schlüssig erklärt, warum dem nicht so sein soll.

Ein Problem mit

echo ("<div id=\"".$row[8]."d1\_nebenzeilen\" style=\"display: block\"><br>".$row[12]."</div>");

sind die Anführungszeichen. Wenn du für HTML und PHP dieselben verwendest, musst du die HMTL-Anführungszeichen escapen. *Das* macht den Code unlesbar. Und fehleranfällig.

Du kannst natürlich für HTML und PHP verschiedene verwenden und so das Escapen sparen:

echo ('<div id="'.$row[8].'d1\_nebenzeilen" style="display: block"><br>'.$row[12].'</div>');

Unschön daran ist immer noch, dass die Anführungszeichen nicht verschachtelt sind. " geht in einem ''-Block auf und in einem anderen ''-Block wieder zu. Auch das macht den Code fehleranfällig.

Nicht so in

<div id="<?php echo $row[8]; ?>d1\_nebenzeilen" style="display: block"><br><?php echo $row[12]; ?></div>

Alles sauber verschachtelt.

Vielleicht gefällt dir auch die Kurzschreibweise besser:

<div id="<?= $row[8] ?>d1\_nebenzeilen" style="display: block"><br><?= $row[12] ?></div>

Es gäbe den <br> Tag nicht, wenn er unnötig wäre. Es gibt ihn aber. Also darf ich den auch benutzen!

Ja, leider gibt es <br>. Das kann für Zeilenumbrüche in Postadressen, Gedichten usw. benutzt werden. Nicht aber für Abstände.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Ein weiteres, aber nicht minder wichtiges Argument, warum man PHP in HTML notieren sollte und nicht andersrum: Einrückungen.

Bei

<div>
  <?= $foo ?>
  <div>
    <?= $bar ?>
    <div>
      <?= $baz ?>
    </div>
</div>

ist sofort ersichtlich, dass ein </div>-End-Tag fehlt.

Das wird bei

echo '<div>';
echo $foo;
echo '<div>';
echo $bar;
echo '<div>';
echo $baz;
echo '</div>';
echo '</div>';

schon deutlich schwieriger.

Auch mit Tabulatoren

echo "<div>";
echo "\t".$foo;
echo "\t<div>";
echo "\t\t".$bar;
echo "\t\t<div>";
echo "\t\t\t".$baz;
echo "\t\t</div>";
echo "</div>";

wird es nicht besser.

Auch mit allem in einem echo nicht:

echo "<div>\n"
  ."\t".$foo."\n"
  ."\t<div>\n"
  ."\t\t".$bar."\n"
  ."\t\t<div>\n"
  ."\t\t\t".$baz."\n"
  ."\t\t</div>\n"
  ."</div>\n";

Im PHP-Code die Einrückungen vornehmen, ist wohl auch nicht das, was man will:

echo "<div>\n"
  .$foo."\n"
  .<div>\n"
    .$bar."\n"
    ."<div>\n"
      .$baz."\n"
    ."</div>\n"
  ."</div>\n";

Man will

<div>
  <?= $foo ?>
  <div>
    <?= $bar ?>
    <div>
      <?= $baz ?>
    </div>
</div>

Qapla'