Javascript Text verschwinden lassen (display:none)

knastmoench · 31.12.2012

Servus,

Habe ein Problem, beidem ich wirklich zu keiner Lösung komme.. (sitze schon die ganze Nacht dran)

Eigentlich eine ganz einfache Sache aber irgendwie wills nicht klappen..

Also:

Ich habe eine einfache html Tabelle, In der Überschrift, Datum + ein kurzer Text steht. Beim klicken auf "mehr" bzw. auf die ganze Tabelle soll ein zusätzliches <td> erscheinen indem mehr Informationen stehen. beim klicken auf "weniger" soll das ganze wieder verschiednen.

Bis aufs verschwinden klappt das auch ganz gut. Habe dazu einfach das <td> mit dem Text angelegt, es im CSS auf display:none; gesetzt und ein OnClick="element.style.display='inline'" eingebaut. (was auch komisch war: display='inline' geht, display='display' nicht :O )

Zum "verschwinden lassen" hab ich das ganze dann einfach wiederholt und in OnClick="element.style.display='none'" abgeändert..
EIGENTLICH sollte das element doch jetzt wieder "verschwunden" sein oder?
Wenn ich display='none' durch z.B opacity='0.0' ersetze funktioniert das auch.. aber ich will es nicht unsichtbar machen, sondern es garnicht erst anzeigen lassen.. eben display:none

Hier mal mein Code dazu:

HTML:

<div id="termine_item">
<table width="100%" OnClick="element.style.display ='inline';">
	<tr>
		<td style="font-size: 12px;"> <b> Überschrift </b>
		<td colspan="2" style="font-size: 12px;"> Datum 
		<td OnClick="element.style.display ='none';"> (X)
		
	<tr><tr><tr><tr>
		<td width="100" valign="top"> <img width="100" src="link"></img>
		<td width="5">
		<td> Unter-überschrift
	<tr>
		<td id="element" style="display: none;" colspan="3" OnClick="this.style.display= 'none'"> dieser Text soll erscheinen/verschwinden
																										<input id="more_buttom" type="button" name="Text 2" value="weniger" OnClick="element.style.display ='none';"></input>

</table>
</div>

Wäre super wenn mir da jemand helfen könnte..

LG

Difool · 31.12.2012

Moin,

für welchen Einsatzzweck du das jetzt verwenden möchtest, weiss ich nicht,
aber evtl. bedienst du dich dafür eher bei jquery.
Du könntest auch auf die Tabelle innerhalb des Containers verzichten.

Entweder das jquery-Plugin "Expander" oder ein jquery mit autom. Textverkürzung "read more":

http://plugins.learningjquery.com/expander/demo/index.html
http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

knastmoench · 02.01.2013

naja sowas einfaches sollte sich auch ohne jquerry lösen lassen..

das Habe ich auch:

HTML:

function changeview(var1){
	if (var1.style.display == "block"){
		var1.style.display = "none";
	}
	
	else{
	var1.style.display = "block";
	}

}

zum Glück ist Javascript ne sehr logisch aufgebaute Sprache.. da kann man sich leicht was ausdenken

iRocko · 02.01.2013

Du machst 6 Tabellenzeilen und 7 Tabellenzellen auf und keines davon wieder zu.
Ich denke du solltest zuerst mal dein Markup in Ordnung bringen bevor du dich an die Funktionalität machst.

knastmoench · 02.01.2013

ehm ja.. Was ich wie code ist vollkommen egal. Wichtig war hier nur Das Problem, dass das show/hide script nicht funktioniert hat!

Ich habe einfach was zum testen gebraucht, da ich zuerst die Hintergrund Funktionen Programmiere mit einem Design das eben ausreicht um alles anzuzeigen. Sobald alles zu funktioniert so wie es soll, kommt das Design dran. Das kann doch jeder sorum machen wir er will!

gerade bei Tests setzt die HTML Tabelle ein schliessen der <td> / <tr> Tags nicht voraus, da sie mit dem öffnen eines neuen automatisch geschlossen werden.

Bisher hat das bei mir immer geklappt nur bei JavaScript fange ich eben gerade erst an. Trotzdem: Problem gelöst ganz ohne Forum.

Und ja.. bevor die App fertig ist, ist die table natürlich raus..

iRocko · 03.01.2013

knastmoench schrieb:
nur bei JavaScript fange ich eben gerade erst an.

Und fehlerhaftes kannst du mit deinem Wissen dann schon als Fehlerquelle ausschließen?
Mit Design hat das überhaupt nix zu tun. Wenn du nur ein halbes Haus baust und dich wunderst warum das Dach nicht hält kannst du auch nicht sagen "am halben Haus liegt's nicht, die Farbe kommt später dran".

knastmoench schrieb:
ehm ja.. Was ich wie code ist vollkommen egal.

Na dann... viel Erfolg weiterhin.

Darii · 03.01.2013

knastmoench schrieb:
Zum "verschwinden lassen" hab ich das ganze dann einfach wiederholt und in OnClick="element.style.display='none'" abgeändert..
EIGENTLICH sollte das element doch jetzt wieder "verschwunden" sein oder?

Nein, weil der Verweis „element“ nicht existiert. Das war früher mal bei einigen Browsern der Fall. Du müsstest document.getElementById("element") benutzen. Benutz also eine neuere Javascript-Anleitung und dann auch lieber gleich jquery.

Zieger · 03.01.2013

vielleich hilf das hier weiter

Code:

<html>
	<head>
		<script type="text/javascript">
		 function anzeigen(das){ 
		 if(document.getElementById(das).style.display=='none') 
		 document.getElementById(das).style.display='block'; 
		 else document.getElementById(das).style.display='none';} 
		</script>
	</head>
	<body>
		<a href="#name" onclick="anzeigen('eins')">einblenden / ausblenden</a>
		<div id="eins" style="display:none;">
			Ein kleiner Text
		</div>
	</body>
</html>

knastmoench · 04.01.2013

iRocko schrieb:
Mit Design hat das überhaupt nix zu tun. Wenn du nur ein halbes Haus baust und dich wunderst warum das Dach nicht hält kannst du auch nicht sagen "am halben Haus liegt's nicht, die Farbe kommt später dran".

Sorry aber so ein Schwachsinn^^ Man kann die Vergleiche immer verdrehen wie man will, sodass es sich dumm anhört..

Ob man jetzt eine table oder ein <div> verwendet ist in dem Fall vollkommen egal! Woher ich das weiss? Ganz einfach weil das verschwinden ja funktioniert hat. Nur das wieder anzeigen ging nicht.. Ausserdem kenne ich mich mit html selbst gut genug aus.. hier geht es nur um JavaScript.

Wenn man das auf dein Haus Beispiel anwendet ist das also so als würde man die Stahlträger einbauen bevor man den Boden verlegt und das nicht gleichzeitig macht.

iRocko schrieb:
Und fehlerhaftes kannst du mit deinem Wissen dann schon als Fehlerquelle ausschließen?

Naja scheinbar schon^^ Es funktioniert jetzt ja.. und da Programmiersprachen logisch aufgebaut sind und ich schon Erfahrung mit einigen habe, kann ich das zu 90% immer ausschliessen.. zumindest bei den einfachen dingen bei denen ich mir sicher bin.
Und das hier war eine der leichtesten Dinge in Javascript.. steht sicherlich in jedem JavaScript Anfänger Buch..

Darii schrieb:
Nein, weil der Verweis „element“ nicht existiert. Das war früher mal bei einigen Browsern der Fall. Du müsstest document.getElementById("element") benutzen. Benutz also eine neuere Javascript-Anleitung und dann auch lieber gleich jquery.

THX aber element ist hier der Name des elements also der Name der im div als id steht.. in Wirklichkeit hab ich die id anders benannt (wird von php generiert) aber da es hier nur um das eine Problem geht hab ich den Code vereinfacht.

der Befehl element.style.display = "none"; macht folgendes:

element = css element also id
style= Befehl für Änderung der style/css befehle
display= css Befehl (kann durch sämtliche css Befehle ersetzt werden)
"none"= neuer Wert für die erwähnte id

man kann es natürlich auch durch document.getElementById ersetzen aber da ich den Namen des elements an fie Funktion "schicke" geht das auch so

Problem ist gelöst!

knastmoench · 04.01.2013

iRocko · 04.01.2013

Passt schon. Du wirst das alles schon richtig machen. Schließlich hast du hier ja scheinbar die meiste Ahnung.

Darii · 05.01.2013

knastmoench schrieb:
THX aber element ist hier der Name des elements also der Name der im div als id steht.. in Wirklichkeit hab ich die id anders benannt (wird von php generiert) aber da es hier nur um das eine Problem geht hab ich den Code vereinfacht.

[...]

man kann es natürlich auch durch document.getElementById ersetzen aber da ich den Namen des elements an fie Funktion "schicke" geht das auch so

Welche Funktion? Dein code stand in einem onclick. In neueren Browsern sind die Element-IDs nicht im globalen Namensraum definiert. Deswegen kann element.style.display nicht funktionieren, unabhängig davon wie das Element wirklich heißt. Es führt kein weg an document.getElementById vorbei.

Deswegen nimm den Rat an und nimm jquery. Andernfalls wird deine Webseite Kompatibilitätskompleme haben, da dir die Problematik nicht bewusst ist. Trial & error funktioniert bei der Webseitenentwicklung nicht, weil jeder Browser sich leicht anders verhält. Deine Lösung mag jetzt bei dir funktionieren. Bei einem anderen User vermutlich nicht mehr.

Und das hier war eine der leichtesten Dinge in Javascript.. steht sicherlich in jedem JavaScript Anfänger Buch..

Ja und du hast es falsch gemacht… Javascript mag relativ logisch sein; die Implementierungen des DOM in den Browser sind es definitiv nicht.

Edit: Ich korrigiere mich, in manchen noch moderneren Browser scheint das wieder zu funktionieren mit den Elementen im globalen namespace. Da ich bin drauf reingefallen. Ein Grund mehr jquery zu benutzen, weil es der Direktzugriff aufs Element definitiv nicht in jedem Browser funktionieren wird. jquery abstrahiert das und viele anderen Inkompatibilitäten weg.

knastmoench · 05.01.2013

Die Funktion kam erst später.. nachdem ich es mal etwas änderst probiert habe..

kann nur sagen, dass es mit diesem Code perfekt funktioniert:

HTML:

<script type="text/javascript">
function showhidetxt(var1){
	if (var1.style.display == "block"){
		var1.style.display = "none";
	}
	
	else{
	var1.style.display = "block";
	}

}
</script>

ich mache dann einfach ein OnCLick="showhidetxt(<?php echo $id_des_elements; ?>)"

und es verschwindet/wird wieder angezeigt.

das mit dem element.style... habe ich auch schon in vielen Javascript Websites gelesen und da es funktioniert würde ich nicht sagen, dass es falsch ist..

Die Seite muss sowieso nur auf mobile Safari laufen.. Mal sehen irgendwann werde ich es mal erweitern und vielleicht wirklich auf die genannten Methoden zurückgreifen, aber damit kann ich (da es momentan funktioniert) noch warten bis ich mehr Erfahrung mit Javascript habe..

Wie auch immer mein Problem wurde gelöst.. THX

Mehr muss dazu denke ich nicht gesagt werden

Javascript Text verschwinden lassen (display:none)

knastmoench

Mitglied

Difool

MU Team

knastmoench

Mitglied

iRocko

unregistriert

knastmoench

Mitglied

iRocko

unregistriert

Darii

Aktives Mitglied

Zieger

Aktives Mitglied

knastmoench

Mitglied

knastmoench

Mitglied

iRocko

unregistriert

Darii

Aktives Mitglied

knastmoench

Mitglied