JavaScript: Wie lässt man ein Element ausblenden und ein anderes einblenden?

Hallo zusammen!

Ich möchte gerne zwei HTML-Buttons mit JavaScript ausblenden sobald auf einer der beiden Buttons geklickt wird. Nachdem die Buttons verschwunden sind sollte ein anderes Element eingeblendet werden. Dieses Element ist schon ausgeblendet, da es dynamisch mit document.write erstellt wird und dass im Moment noch nicht passiert.

Hat jemand einen Pseudocode?

4 Antworten

LeBonyt

07.02.2020, 16:12

"da es dynamisch mit document.write erstellt wird"

macht heute de facto keiner mehr, sondern fügt Elemente dynamisch durch Selektoren mit Methoden ähnlich wie innerHTML, appendTo in den DOM Tree ein. Ausblenden kannst Du ein Element mit der CSS Formatierung display:none;

Verwendest Du JQuery?

https://stackoverflow.com/questions/35174144/toggling-between-two-buttons-using-jquery

Dann ist das genau das richtige für dich.

Vielleicht haben hier Kollegen eine bessere Lösung.

Woher ich das weiß:Berufserfahrung – Web Developer bei einem mittelständischen Portalbetreiber

FinnB132

07.02.2020, 16:16

Guter Einwand zu document.write, der Fragesteller wollte aber meine ich beide buttons ausblenden und ein komplett neues Element anstelle dieser anzeigen.

Frage hätte man vielleicht ein bisschen besser formulieren sollen.

LeBonyt

07.02.2020, 16:18

@FinnB132

Deinen Kommentar zu Jquery weiter unten stimme ich auch zu, deswegen wurde die Verwendung von JQ als Frage formuliert.

FinnB132

07.02.2020, 16:25

@LeBonyt

Hatte selber bis vor 6 Monaten oft JQuery in Webanwendungen implementiert, nachdem ich aber dann eine Wette gegen einen Mitarbeiter verloren hatte, indem es darum ging ob man mit einer forEach auf document.querySelectorAll() schneller text einfügen konnte als mit einem klassischen $(".selector").text() Funktionsaufruf, habe ich aufgehört JQuery zu benutzen und teilweise sogar aus alten Webanwendungen entfernt.

Ich hatte dann selber noch ein paar tests gemacht und gemerkt das JQuery nur in sehr wenigen fällen lohnenswert ist.

Entweder man hat inzwischen sowieso ein komplettes Framework implementiert (React, Angular...) oder man bekommt es auch mit Vanilla hin.

So meine Erfahrung mit JQuery.

FinnB132

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

07.02.2020, 16:08

Du gibst den Buttons in deinem HTML eine Klasse, in der JavaScript Funktion werden dann alle Elemente mit der Klasse über das document geholt und du kannst dann das style Attribut der DOM Node entsprechend setzen:

element.style.display = "none"

danach kannst du dann deine von document.write erzeugte DOM Node entsprechend manipulieren, das sie angezeigt wird.

Woher ich das weiß:Studium / Ausbildung – Gelernter Fachinformatiker, Freiberufl. Softwareentwickler

LeonEliasW

07.02.2020, 16:00

Hallo,

ich habe was im Kopf und probiere das noch mal eben.

Aber im Endeffekt so etwas hier:

document.getElementById('buttonId').style.visibility = 'hidden';

Liebe Grüße
Leon

Woher ich das weiß:Berufserfahrung

LeonEliasW

07.02.2020, 16:12

Oder du gibst dem Buttton eine Klasse und greifst im CSS auf diese zu:

$('#buttonId').attr('class', 'buttonNotVisibleClass');

Wichtig dabei ist, dass das ein jQuery-Code ist und kein "normales" JavaScript.

Du musst selbstverständlich sowohl die "buttonId", als auch die "buttonNotVisibleClass" so umbennen, wie die ID von deinem Button und falls du das über eine CSS-Datei machst, wie die Klasse heißen soll.

Es funktionieren beide Wege, beim 2. musst du natürlich noch den CSS-Teil zum Verstecken des Buttons schreiben.

Liebe Grüße
Leon

Nobody2019

07.02.2020, 16:06

javascript zu wissen ist natürlich wichtig. Aber ich würde dir auch jquery empfehlen. Ist prinzipiell JavaScript aber viel komfortabler wie ich finde

Die Antwort habe ich ausgelassen weil die Frage beantwortet wurde.

Woher ich das weiß:eigene Erfahrung

FinnB132

07.02.2020, 16:10

Wieso sollte man für ein einzelnes Feature eine ganze Library einbinden? Zudem ist das auch sehr gut ohne JQuery machbar, und zudem inzwischen performanter.

https://medium.com/@trombino.marco/you-might-not-need-jquery-a-2018-performance-case-study-aa6531d0b0c3

Nobody2019

07.02.2020, 16:12

@FinnB132

Er hat nur eine Frage bezüglich dieses Problems gestellt. Wir wissen nicht wie umfangreich er JS verwendet, zudem kann es für andere Projekte in Zukunft hilfreich sein. War nur eine Empfehlung.

Nobody2019

07.02.2020, 16:14

@Nobody2019

Die Antwort auf seine Frage hat er ja wie schon erwähnt erhalten daher bin ich nicht auf sein Problem eingegangen

FinnB132

07.02.2020, 16:19

@Nobody2019

Klar JQuery kann schon nützlich sein, aber gerade wenn man anfängt JavaScript zu lernen sollte man vielleicht erstmal den Vanilla teil lernen, damit man auch versteht was JQuery da im Hintergrund macht.

Nobody2019

07.02.2020, 16:21

@FinnB132

Ja klar, da hast du auch völlig recht, in der Regel wird aber bei den Videos etc. Erklärt wann JQuery sinnvoll ist daher bin ich nicht ins Detail gegangen. Aber sind da wohl der selben Ansicht.

Ähnliche Beiträge

Hallo, Möchte per VBA prüfen, ob Zeile 4-10 eingeblendet sind, dann diese ausblenden und wenn diese Zeilen ausgeblendet sind , dann diese einblenden?

...zum Beitrag

Tellonym - Ausgeblendete Tells wieder anzeigen/einblenden?

Hallo,

ich habe einen Tell geschrieben und wollte ihn löschen, was nicht ging. Ich konnte ihn nur (für mich) ausblenden. Jetzt ist er aber weg und ich weiß nicht, wie ich meinen Tell wieder einblenden/anzeigen kann.

Ist wichtig; hoffe, ihr könnt mir helfen!

...zum Beitrag

Habe ausversehen bei After effects Sichtbarkeit und Ton des Clips in der Toolbar ausgeblendet?

Ich habe letzte Woche After effects installiert und ein wenig rumgespielt und ich weiß nicht mehr aber irgendwie hab ich ausprobieren wollen was passiert wenn ich was auf der Toolbar ausblende, hab also Rechtsklick auf das augensymbol (siehe Bild) gemacht und ausblenden geklickt aber ich bekomme es nicht mehr eingeblendet 😭 ich bin verzweifelt was soll ich tun? After effects zurücksetzen?

...zum Beitrag

Wenn in einer Zelle eine bestimmtes Wort steht, sollen die Zeilen darunter ausgeblendet bzw. eingeblendet werden. Geht das?

Hi,

in der Spalte B2 steht entweder: Leer, Auto1 und Auto2

Jetzt möchte ich folgendes:

Auto 1 -> ausblenden der Zeilen A5 bis A1500. Auto 2 -> ausblenden der Zeilen A1501 bis A3000 Leer -> ausblenden der Zeilen A5 bis A3000

Geht sowas? Könnt Ihr mir helfen?

...zum Beitrag

Html und Javascritp Gif ein und ausblenden lassen?

Ich möchte mit Html und Javascript ein Gif per button einfügen lassen. Ich habe schon einiges ausprobiert aber es funktioniert nicht, ich würde mich gerne über Hilfe freuen. (Die Aufgabe war es einen Kopfrechentrainer zu programmieren, als Zusatz ein Bild einfügen,...)

<html>
	<head>
		<title> Kopfrechentrainer Ultimate </title>
	</head>
	<body>
<script language=javascript>


{	var a;
	var b;
	var c;
	var d;
	var f=0;
	var r=0;
	var x;
}	
	function random()
	
{
	a=Math.floor(Math.random()*90)+10;
	document.rechnen.eingabe1.value=a;
	
	b=Math.floor(Math.random()*9)+1;
	document.rechnen.eingabe2.value=b;	
}


	function kontrolle()
{
	c=document.rechnen.vergleich.value;
	if(a*b==c){r++;document.rechnen.richtig.value=""+r}
	if(a*b!=c){f++;document.rechnen.falsch.value=""+f}


	if(r+f==50)
{
	if(r==0){alert('soos')}
	else if(0<r<=10){alert('saas')}
	else if(10<r<=20){alert('sees')}
	else if(20<r<=30){alert('siis')}
	else if(30<r<=40){alert('suus')}
	else if(40<r<=50){alert('fiif')}
}


}
	function zurück()
{
	document.rechnen.richtig.value=""
	document.rechnen.falsch.value=""
}


	function shutdown()
{
	window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
}


	function bka()
{
   	var audio = new Audio('sirene.mp3');
   	audio.play();


	document.getElementById("bkaf").style.display="none";
}


</script>








	
		<font color ="red"> <h2 align = center>  Kopfrechentrainer Ultimate </h2> </font>
		<br>
		<p align = center> <b>  
		Du kannst hier Multiplikationsaufgaben üben. <br>
		Beim Klicken auf den Button werden dir dir nacheinander 50 Aufgaben gestellt.
		</p> </b>
		<br>
		<br>
		<h1 align = center> Bereit? </h1>
		<br>
	<form name="rechnen">
		<input type=button value="Start" onclick=random()>
		<br> <br>
		<INPUT type=text name=eingabe1 value=""> *
		<INPUT type=text name=eingabe2 value=""> =
		<INPUT type=text name=vergleich value="">
		
			<input type=button value="Kontrolle" onclick=kontrolle()>
			<input type=button value="Zurücksetzen" onclick=zurück()>
				
		<br> <br> 
	<p align = center> <b>
		Richtig gelöst Falsch gelöst
	</b> 
		<br> <br>
		<INPUT type=text name=richtig value=""> 
		<INPUT type=text name=falsch value="">
	<br> <br>
		<input type=button value="shutdown" onclick=shutdown()>
	<br> <br>
		<input type=button value="BKA Modus" onclick=bka()>
		
		<audio autoplay>
 		 <source src="sirene.mp3" type="audio/mpeg">
		</audio>
		<br>
	<div id="bkaf">
	<img id="blaulicht" src="blaulicht.gif">	
	</div>


	</form>










	</body>
</html>

...zum Beitrag

Kann man ausgeblendete Inhalte/Personen wieder „einblenden“?

Hallo, man kan hier ja leute und deren Inhalte ausblenden also das sie dir nicht mehr angezeigt werden.

Kann man das Rückgängig machen und wenn ja wie?

ps. Ich habe bei Hilfe/FAQ nichts dazu gefunden.

...zum Beitrag

Ausgeblendetes Tabellenblatt einblenden und dann aktivieren möglich?

Und wieder eine Frage:

Ich habe ausgeblendete Tabellenblätter und möchte nun über einen Command-Button, dass sich die Userform schließt, ein bestimmtes Tabellenblatt eingeblendet, dann aktiviert und dann eine Userform öffnet. Im Debug-Modus klappt es, aber wenn ich es direkt versuche, wird zwar die Userform geschlossen aber das Tabellenblatt nicht eingeblendet und aktiviert. Wenn ich die Userform schließe, dann aber wird das Tabellenblatt eingeblendet.

Habe wohl eine falsche Reihenfolge in diesem Code:

Private Sub CMD_More_Click()
    CMD_More.TakeFocusOnClick = False
    Unload Me
    Worksheets("Fertigungsprüfplan Seite 2").Visible = True
    Call change1
End Sub

Public Sub change1()
    Worksheets("Fertigungsprüfplan Seite 2").Select
    Range("A1").Select
    Load UserFormInspectionFeature2
    UserFormInspectionFeature2.Show
End Sub

Kann da auch jemand helfen? Danke im Voraus. Ich möchte es nur verstehen...

...zum Beitrag

wie klicke ich über python einen button auf einer webseite?

Hey Community!

Ich experimentiere aktuell ein wenig mit Python herum und versuche über das Selenium Modul einen Button ausfindig zu machen und ihn dann zu klicken.

Wenn ich die Webseite untersuche bekommt man folgenden code:

Mein Programm schafft es nicht diesen Button ausfindig zu machen.

Die Fehlermeldung lautet:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"./ancestor-or-self::form"} (Session info: chrome=78.0.3904.97).

Ich habe diesen Button untersucht und die xpath adresse kopiert, das Element Xpath habe ich dann gesucht und anschließend geklickt:

browser.find_element_by_xpath('//[@id="urlDown"]/div[2]').click()

kann mir jemand helfen?

...zum Beitrag

Dynamisches HTML Unterschied PHP/Javascript?

Hallo, ich muss mich für meine IHK Abschlussprüfung ein bisschen mit Websites, html, javascript, php usw. auseinandersetzten. Es gibt also statisches HTML, wo nur html und css verwendet wird. Dies ist Sicher aber wenig hübsch und ohne große Funktionen. Dann gibt es dynamisches HTML, wo durch die Einbindung von javascript und php weitere Funktionen implementiert werden. Dynamische Elemente, die nicht direkt beim http request übermittelt werden, sondern dynamisch zur Laufzeit erzeugt werden können (So weit alles richtig?). Jetzt frage ich mich, wo genau php und wo javascript eingesetzt wird. Ich stelle mir das so vor, dass für Menüs, interaktive Elemente usw. wo kein Code/Dateien vom Server nachgeladen werden müssen js verwendet wird. Und für Elemente die vom Webserver (per CGI) verarbeitet werden und eine Interaktion dessen also z.B. das nachladen von Dateien erfordert, php verwendet wird. Ist das (grundlegend so korrekt? Oder wo ist da der genaue Unterschied?

...zum Beitrag

Excel VBA: Wie kann ich mehrere Zeilen in einem Bereich ausblenden?

WENN in A3:A1000 "x" steht, sollen diese Zeilen eingeblendet bleiben,

WENN in A3:A1000 " " steht, sollen diese Zeilen ausgeblendet werden.

Vielen Dank

...zum Beitrag

Excel VBA: Nur eingeblendete Zeilen in ein anderes Tabellenblatt kopieren?

Durch ein anderes Makro wird zuvor der Bereich A5:C400 so gefiltert, das alle leeren A-Zellen die ganze Zeile ausblenden lässt. Im jetzigen Schritt versuche ich, den Bereich A5:C400, in welchem viele Zeilen ausgeblendet sind, auf ein anderes Tabellenball zu kopieren. Das Bild zeigt meine aktuellen Stand, aber irgendwie bin ich da überfragt. Die ausgeblendeten Zeilen sollen NICHT mitkopiert werden.

Könnte jmd mein Programm anpassen, sodass es klappt?

VIelen Dank!

...zum Beitrag

JavaScript Rechentrainer Schulaufgabe?

<html>
	<head>
		<title> Kopfrechentrainer </title>
	</head>
	<body>
<script language=javascript>


{	var a;
	var b;
	var c;
	var d;
	var f=0;
	var r=0;
}	
	function random()
	
{
	a=Math.floor(Math.random()*90)+10;
	document.rechnen.eingabe1.value=a;
	
	b=Math.floor(Math.random()*9)+1;
	document.rechnen.eingabe2.value=b;	
}


	function kontrolle()
{
	
		if(onclick=kontrolle){onclick=random}
	c=document.rechnen.vergleich.value;
	if(a*b==c){r++;document.rechnen.richtig.value=""+r}
	if(a*b!=c){f++;document.rechnen.falsch.value=""+f}
	
	if(r+f==5)
{
	if(r==0){alert('oh, das war garnichts, übe noch einmal')}
	if(r==1){alert('du musst noch einaml üben')}
	if(r==2){alert('da geht noch mehr')}
	if(r==3){alert('du solltest och etwas üben')}
	if(r==4){alert('das nächste mal vielleicht')}
	if(r==5){alert('sehr gut, du hast alle Aufgaben richtig gelöst')}
}
	if(r+f==5){onclick=zurück}
}
	function zurück()
{
	document.rechnen.richtig.value=""
	document.rechnen.falsch.value=""
}










</script>








	
		<font color ="red"> <h2 align = center>  Kopfrechentrainer  </h2> </font>
		<br>
		<p align = center> <b>  
		Du kannst hier Multiplikationsaufgaben üben. <br>
		Beim Klicken auf den Button werden dir dir nacheinander 5 Aufgaben gestellt.
		</p> </b>
		<br>
		<br>
		<h1 align = center> Bereit? </h1>
		<br>
	<form name="rechnen" p align = center>
		<input type=button value="Start" onclick=random()>
		<br> <br>
		<INPUT type=text name=eingabe1 value=""> *
		<INPUT type=text name=eingabe2 value=""> =
		<INPUT type=text name=vergleich value="">
		
			<input type=button value="Kontrolle" onclick=kontrolle()>


				
		<br> <br> 
	<p align = center> <b>
		Richtig gelöst <------------> Falsch gelöst
	</b> 
		<br> <br>
		<INPUT type=text name=richtig value=""> 
		<INPUT type=text name=falsch value="">
	<br> <br>
		
	</form /p>>










	</body>
</html>

An sich Funktioniert erstmal alles so wie es soll, jedoch besteht das Problem darin das wenn ich in das Textfeld um ein neues Ergebnis einzutragen gehe, dann wird eine neue Aufgabe erstellt obwohl ich nicht auf den Button Kontrolle geklickt habe.

Ich hoffe jemand kann mir helfen, vielen dank.

...zum Beitrag

Wie bekomme ich in Excel mehrere ausgeblendete Spalten schnell wieder sichtbar?

Moin,

wie kann ich in Excel mehrere ausgeblendete nebeneinander liegende Spalten auf die Schnelle wieder einblenden?

Dort, wo die Spalten ausgeblendet wurden, sieht man oben bei den Spaltenangaben nur noch einen sehr schmalen Balken. Darüber mache ich über einzelne Doppelklicks Spalte für Spalte wieder sichtbar.

Ist bei zwei drei Spalten natürlich kein Ding, aber geht das auch irgendwie schneller bei zum Beispiel 20 Spalten?

Ist eine Hilfstabelle, die ich am Ende immer ausblende, aber zum Bearbeiten hin und wieder einblenden muss.

Danke!

...zum Beitrag

Wie kann ich einer Javascript Funktion Argumente per Onclick übergeben?

ich möchte flexibler programmieren und habe daher das Onclick-Event nicht im Button zu stehen. Ich rufe dieses Event über eine Id auf.

var element.document.getElementById("element");

Nun habe ich eine Funktion geschrieben, die für einen Parameter ein Argument erwartet, diesen möchte ich per Onclick-Event übergeben.

Wenn ich das Event wie folgend aufrufe, wird die Funktion gleich ausgeführt, ohne das ich den Button klicken muss.

anderesElement.onclick = nameDerFunktion("String-Argument");

Wie kann ich der Funktion nun ein Argument per Buttonklick übergeben?

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen