nicht angemeldet
Längeren Text anhängen
0 0 
Gunnar Bittersmann
0 0 0 0 0 Gunnar Bittersmann
Längeren Text anhängen
Hallo,
ich bin absoluter Javascript Neuling und grad erst am lernen. Dabei bin ich auf folgendes Problem gestoßen: Ich möchte auf einer Seite einen Link einfügen, mit dem man den bestehenden Text erweitern kann, also praktisch nur ein Teil des Textes da steht (in meinem Beispiel der erste Absatz) und bei Klick auf den Button/Link die restlichen Absätze hinzugefügt werden. Ich habe hier im Forum bereits einen Code gefunden und ein wenig verändert, so dass es jetzt bei mir so aussieht:
<script type="text/javascript">
function mehr_text(Element, Text) {
var position = Element;
var erweiterung = Text;
document.getElementById(position).innerHTML += erweiterung;
}
</script>
Das ganze wird zurzeit über einen Formularbutton aufgerufen:
<input type="button" value="Weiterlesen" onclick='mehr_text("anfangstext", "blablabla");
Soweit funktioniert das auch, der Text wird immer an den bestehenden angefügt. Bei meinem Beispiel sind es aber mehrere Absaätze, die hinzugefügt werden sollen. Wenn aber <BR /> oder <p> </p> in dem Text stehen, passiert nichts mehr. Wie kann ich das lösen? Gibts es da eine Möglichkeit?
Wäre nett wenn mir jemand helfen würde :(
-
Sobald Du weitere Tags in das Node schreibst, ändert sich der Pointer, damit musst Du element neu referenzieren (bspw. über document.getElementById).
Gruß, LX
--
RFC 1925, Satz 8: Es ist komplizierter als man denkt.-
Sobald Du weitere Tags in das Node schreibst, ändert sich der Pointer, damit musst Du element neu referenzieren (bspw. über document.getElementById).
Gruß, LX
Und wie müsste das dann aussehen? Ich hab davone cht keine Ahnung :(
-
-
@@wh!te:
nuqneH
Hallo,
ich bin absoluter Javascript Neuling und grad erst am lernen. Dabei bin ich auf folgendes Problem gestoßen: Ich möchte auf einer Seite einen Link einfügen, mit dem man den bestehenden Text erweitern kann, also praktisch nur ein Teil des Textes da steht (in meinem Beispiel der erste Absatz) und bei Klick auf den Button/Link die restlichen Absätze hinzugefügt werden.Mit JavaScript? Das ist keine gute Idee. Besucher ohne JavaScript (und das sind nicht nur menschliche) bekommen nicht den ganzen Text zu sehen.
Besser ist es, den ganzen Text im HTML-Code zu haben und mit JavaScript auszublenden. Dazu dem 'body' per JavaScript eine Klasse "js" geben und im Stylesheet per Nachfahrenselektor ausblenden (also nur bei aktiviertem JavaScript). Durch Click auf den Button wird dem 'div'-Elternelement die Klasse "zeigeAlles" hinzugefügt und damit die ausgblendeten Absätze eingeblendet und der Button ausgeblendet:
<body> <script type="text/javascript">[code lang=javascript]document.body.className += " js"; ~~~</script> <div class="angeteasert"> <p class="teaser">Dies ist der erste Absatz, der immer sichtbar ist.</p> <p>Dies ist der zweite Absatz, der anfangs versteckt ist.</p> <p>Dies ist der dritte Absatz, der anfangs versteckt ist.</p> <button onclick="`this.parentNode.className += ' zeigeAlles';`{:.language-javascript}">Weiterlesen</button> </div> </body>[/code] Im Stylesheet: ~~~css .js .angeteasert p { display: none } .js .angeteasert p.teaser { display: block } .js .angeteasert.zeigeAlles p { display: block } .js .angeteasert.zeigeAlles button { display: none }Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
<body>
<script type="text/javascript">[code lang=javascript]document.body.className += " js";
> <div class="angeteasert"> > <p class="teaser">Dies ist der erste Absatz, der immer sichtbar ist.</p> > <p>Dies ist der zweite Absatz, der anfangs versteckt ist.</p> > <p>Dies ist der dritte Absatz, der anfangs versteckt ist.</p> > <button onclick="`this.parentNode.className += ' zeigeAlles';`{:.language-javascript}">Weiterlesen</button> > </div> > </body>[/code] > > Im Stylesheet: > > ~~~css .js .angeteasert p { display: none } > .js .angeteasert p.teaser { display: block } > .js .angeteasert.zeigeAlles p { display: block } > .js .angeteasert.zeigeAlles button { display: none }Qapla'
Funktioniert einwandfrei, echt super! Vielen Dank! Eine Frage hätte ich dazu aber noch: Kann man das ganze dann auch wieder durch einen Button unsichtbar machen, also wieder verkleinern? Wäre nett, Danke!
-
Hi,
Funktioniert einwandfrei, echt super! Vielen Dank! Eine Frage hätte ich dazu aber noch: Kann man das ganze dann auch wieder durch einen Button unsichtbar machen, also wieder verkleinern?
Es wurde etwas sichtbar gemacht, in dem BODY eine (zusätzliche) Klasse verpasst wurde.
Was davon könnte man jetzt eventuell wieder rückgängig machen, um auch den Effekt wieder rückgängig zu machen ...?
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Es wurde etwas sichtbar gemacht, in dem BODY eine (zusätzliche) Klasse verpasst wurde.
Was davon könnte man jetzt eventuell wieder rückgängig machen, um auch den Effekt wieder rückgängig zu machen ...?
MfG ChrisB
Ist mir schon klar, dass man das rückgängig machen muss! Nur leider bin ich Anfänger und hab keine Ahnung wie ich das machen kann..
-
Hi,
Ist mir schon klar, dass man das rückgängig machen muss!
Das war nicht ersichtlich - was dir klar ist und was nicht, können wir nur erkennen, wenn du das auch beschreibst.
Nur leider bin ich Anfänger und hab keine Ahnung wie ich das machen kann..
Überlegen, statt Jammern.
Wie das setzen einer neuen zusätzlichen Klasse funktioniert, ist ja aus dem Beispiel ersichtlich - eine einfache Zuweisung mit dem += Operator, der einen neuen Wert an den bereits vorhandenen anhängt.
Wenn dein BODY normalerweise gar keine Klasse hat/braucht - dann kannst du sie ganz einfach wieder entfernen, in dem du einen Leerstring zuweist.
Wenn schon vorher Klassen vorhanden waren, die auch erhalten bleiben sollen - dann muss man noch ein bisschen mehr nachdenken, wie man das machen könnte.MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
@@ChrisB:
nuqneH
Es wurde etwas sichtbar gemacht, in dem BODY eine (zusätzliche) Klasse verpasst wurde.
Nein, das 'div'-Element hat diese zusätzliche Klasse
Wenn schon vorher Klassen vorhanden waren, die auch erhalten bleiben sollen - dann muss man noch ein bisschen mehr nachdenken, wie man das machen könnte.
"angeteasert" sollte erhalten bleiben, "zeigeAlles" nicht.
Steuern ließe sich das entweder mit einem zweiten Button mit dem „Weiterlesen“-Button entgegengesetzter Sichtbarkeit oder einem (bei aktiviertem JavaScript!) immer sichtbaren Button, der bei 'click' die Sichtbarkeit des Textes umschaltet.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Steuern ließe sich das entweder mit einem zweiten Button mit dem „Weiterlesen“-Button entgegengesetzter Sichtbarkeit oder einem (bei aktiviertem JavaScript!) immer sichtbaren Button, der bei 'click' die Sichtbarkeit des Textes umschaltet.
Qapla'
So habs sjetzt durch ausprobieren geschafft :D hab jetzt nen zweiten Button, der so aussieht
<button class=\"sichtbar\" onclick=\"this.parentNode.className = ' kurztexte';\">Weiterlesen</button>";Funktioniert, jetzt muss ich nur noch in der CSS die Sichtbarkeit ändern, dass die abwechselnd sichtbar sind.
Danke für die Hilfe.
-
Hi,
Es wurde etwas sichtbar gemacht, in dem BODY eine (zusätzliche) Klasse verpasst wurde.
Nein, das 'div'-Element hat diese zusätzliche Klasse
Nein, du hast in deinem Beispiel BODY per JavaScript eine zusätzliche Klasse gegeben: document.body.className += " js"
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
@@ChrisB:
nuqneH
Es wurde etwas sichtbar gemacht, in dem BODY eine (zusätzliche) Klasse verpasst wurde.
Nein, das 'div'-Element hat diese zusätzliche Klasse
Nein, du hast in deinem Beispiel BODY per JavaScript eine zusätzliche Klasse gegeben: document.body.className += " js"
Diese dient aber nicht dazu, den ganzen Text sichtbar zu machen, sondern dazu, ihn (bis auf den Teaser) initial unsichtbar zu machen.
Richtig ist:
Es wurde der ganze Text sichtbar gemacht, indem 'div' eine (zusätzliche) Klasse verpasst wurde (nämlich "zeigeAlles").Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-
-
-
-