Buttons in Javascript?

Ich musste ein Quiz erstellen. Hab ich schon. Ich habe 4 Buttons die onclick sind und ich möchte jetzt haben, dass wenn ein button geklickt (egal ob richtig oder falsch) wird, ein Bild aufpoppt.

Ebenfalls was ich möchte ist, wenn ein Button geklickt wird, dass die anderen 3 gesperrt werden und nicht mehr klickbar sind.

Nur finde ich nirgends, wie ich das machen kann.

Könnte mir das wer erklären?

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren, JavaScript

14.04.2019, 16:17

Ein Beispiel mit einem Bild und einem Button:

<img alt="flower" id="someImage" src="path/to/some/image.jpg">
<button id="someButton" type="button">Click me</button>

Das Bild wird initial als nicht sichtbar gesetzt. Dafür kann man in CSS das Property visibility verwenden oder das Property display.

img {
  display: none;
}

Der Button wird mit einem Listener ausgestattet, der auf das Klick-Event reagiert. In dessen Callback wird das Property des Bildelements geändert.

document.getElementById("someButton").addEventListener("click", evt => {
  document.getElementById("someImage").style.display = "inline-block";
});

Demo

Nur finde ich nirgends, wie ich das machen kann.

Beschäftige dich mit der DOM API und den CSS-Properties, die es für verschiedene Elemente so gibt. Du musst sie nicht alle kennen, die Referenz von MDN hilft dir.

Ähnliche Beiträge

Programmieren javascript alert function?

hallo!
button erstellen:

bsp: onclick="alert ('hallo')"

frage: was ist der Unterschied zwischen alert und function? Function muss ich zwar noch definieren aber Ich kann doch mit beiden festlegen, was durch den Klick passieren soll oder?

danke im Voraus

...zum Beitrag

CSS-onclick?

Hallo, ist es möglich, dass ich die Farbe von einem Button ändern kann, wenn ich draufklicke? Gibt es da so etwas wie "onclick", wie bei JavaScript?

...zum Beitrag

CSS transition mit JavaScript onclick ausfuehren?

Ich wuerde gerne in einer NavBar (oben fixiert), links einen Button erstellen, der mit onclick eine CSS ausfuehrt, die eine SideBar (von links) drauflegt.

Also, sobald links oben das Onclick geklickt wird -> Sidebar wird von links aus reingeschoben, indem eine CSS ausgefuehrt wird.

Das einzige was Ich nicht wuesste ist wie Ich das JS onclick dazu bringe, entweder eine CSS auszufuehren, oder gar zu erstellen/auszuwechseln (zu replacen). Bzw. alternativ, was mir noch in den Sinn kaeme, koennte das CSS in default ja in einem Kommentar stehen, und bei Ausfuehrung wird zwischen zwei CSS gewechselt (das eine wird in Kommentar gesetzt (default) und das andere, was normal in Kommentar steht, steht nun ohne Kommentar, und bei wegklicken wird das wieder zurueckgesetzt) - aber wie wuerde das gehen, Ich habe naemlich keinerlei Idee dazu..

...zum Beitrag

Counter in JavaScript?

Hallo Freunde, ich möchte in JavaScript einen Button erstellen. Auf dem Button steht 0 und immer wenn ich drauf drücke soll da eine 1 hinzugefügt werden quasi Click= 1, click= 2 usw. aber ich will bei 9 wieder von neu anfangen also es soll wieder 0 werden! Bitte Hilfe ich beschäftige mich seit gestern damit aber kriege nix hin. Für jede kleine Hilfe danke im Voraus❤️

...zum Beitrag

jQuery Plugin Datatables mit bestimmter anzahl an einträgen anzeigen?

Hallo Forum, ich habe eine Tabelle, welche ich mit dem jQuery Plugin Datatables ( https://datatables.net/ ) erstellt habe. Diese wollte ich mit Buttons filtern können, dass z.B nur die ersten 9 Einträge der Tabelle angezeigt werden. Bei drücken auf einen anderen Knopf sollen dann z.B 12 Einträge angezeigt werden. Gibt es dafür javascript-Befehle, welche ich mit onClick() in den Button tun kann? Meine google-suchen waren bisher leider erfolglos.

Mit freundlichen Grüßen,

Quattrofun

...zum Beitrag

Mehrere Parameter durch einen Button ausgeben in Javascript?

Ich lerne gerade Javascript mit einer Tutorial Reihe und der Mann im Tutorial hat mehrere Parameter benutzt um einen Liebes Test zu Programmieren. Ich wollte dann das man erst einen Knopf drücken muss um das Ergebnis angezeigt zu bekommen. Aber es funktioniert nicht denn wenn ich auf den Button drücke, passiert nichts. woran liegt das ? Das ist mein Code: (Die formatierung ist eigentlich anders)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function LiebesTest(name1, name2){

document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte ");

var punke;

punkte= (name1+name2).length;

}

LiebesTest("Filme", "serien");

</script>

<form>

<input onclick="text" type="button" value="Test!"

</form>

</body>

</html>

...zum Beitrag

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?

...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

Wie gebe ich Dictionary einer Funktion in Javascript mit?

Hallo, ich kriege folgende Fehlermeldung bei meinem Code: "Uncaught SyntaxError: Unexpected identifier" und weiß nicht wie ich mein dict meine onclick so übergebe, dass ich anschließend damit weiterarbeiten und iterieren kann. Als Beispiel für mein Problem habe ich folgende kleine anwendung geschrieben:

script.js:

function geklickt(dictionary){
$('#Entries').text(dictionary);
}


var dict =
{'lizens':
    {'Apache License 2.0':
        {'value': 23,
         'paths': ['Bernd', 'Hans'],
         'id': '342345'}},
'rechte':
        {'Copyright (c) 2013-2020 the original author or authors': 3},
'authoren':
        {'Bexter': 6, 'senior': 6},
'fileTypes': [0, 21, 0, 0, 0, 0, 0, 0, 44],
}


 $("#buttons").append(`<button href="#"onclick="geklickt(${dict})">drücken</a></button>`);



test.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >

<ul id="buttons"></ul>
<p id="Entries"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='assets/js/scripts.js') }}"></script>
</body>
</html>

Also meine Frage ist wie ich jetzt mein dict der onclick übergebe damit es am ende ausgegeben werden kann. In meiner eigentlichen Anwendung will ich damit natürlich noch weiterarbeiten, also vlt auch so dass ich es anschließend noch iterieren kann. Ich bin recht neu und kenne den Zusammenhang zwischen String und Dictionary noch nicht richtig, kann ich bei einem Dictionary iterieren wenn es als string vorliegt oder ist Dictionary eine art eigene Datenstruktur?
Danke schonmal im Voraus.

...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 kann ich in javascript eine funktion ohne button auslösen?

Hallo,

ich bin noch Anfänger in javascript und wollte fragen wie ich eine Funktion in javascript auslöse nachdem meine HTML Seite geladen hat, ohne explizit einen button mit einer onclick zu schreiben der diese Funktion aufruft. Die Funktion kriegt ein Parameter im HTML Teil übergeben, was dann in etwa so aussieht:

<button id="drücken" onclick="Funktion({{result}})"></button>

ich kriege das nur durch diesen button im html teil hin.

<tbody id="Eintrag"></tbody>

der Parameter wird iteriert und in eine Tabelle gehängt

Javascript:

function Funktion(result){

for(var key in result)

key an Eintrag anhängen.

}

Das funktioniert auch alles gut, nur wird das alles nur ausgeführt wenn ich explizit auf den button drücke. verstehe auch nicht wie das sonst gehen würde. Ich kann ja nicht beispielsweise ein window.onload auf der javascript-Datei schreiben weil ich ja noch den result parameter in der HTML Datei übergeben muss.

Gibt es eventuell eine Möglichkeit innerhalb des HTML Datei dann sowas zu schreiben?:

window.onload = Funktion({{result}});

Bei mir kennt er dann nicht Funktion weil es auf der externen Javascript-Datei liegt.

...zum Beitrag

Wie kann ich einen Button in Javascript unsichtbar aber trotzdem funktional machen?

Hey,

ich programmiere zurzeit mit HTML, CSS und Javascript eine Handy App.
Jetzt brauche ich aber einen unsichtbaren Button, der über einem Bild liegt. Heißt wenn man auf einen bestimmten Teil des Bildes Klickt, klickt man nicht auf das Bild sondern auf den Button. Kann mir jemand erklären, wie ich das mache?

...zum Beitrag

Android Studio / Wie kann ich die OnClick Methode Button ID abhängig machen?

Hallo Zusammen Ich beginne gerade mit Android Studio mich an der App Erstellung an zu tasten. Da ich auf einer Activity die Anzahl der Buttons anpasse je nach Eingabe, erstelle ich das Layout über den Code. Ich habe aber nun das Problem das ich immer dieselbe onClick Methode habe. Wie kann ich diese von der Button ID abhängig machen? Ich möchte, dass jeder Button etwas anderes ausführt. Ich bin dankbar für jeden tipp. Lg Karl

...zum Beitrag

Wie übergibt man Sonderzeichen (z.B. =) als String im Parameter einer Javascript-Funktion?

Hallo,

ich bastle etwas mit Javascript und bin auf ein Problem gestoßen, was ich bislang nicht lösen konnte.

Ich versuche einen einfachen Taschenrechner zu bauen (und ja, ich weiß, dass es auch anders und leichter machbar wäre). Hier geht es aber eher um eine grundsätzliche Problematik, die sich ergeben hat und die ich gerne lösen würde.

Über einen Button wird mit dem onclick-Event die Funktion angesprochen, die ich definiert habe. Erwartet wird ein Parameter als String: eingabe(eing)

Wenn ich allerdings versuche ein "=" als Parameter zu übergeben, kommt nichts in der Funktion an.

Ich habe auch schon versuche mit \=; "="; %3D und = das Zeichen zu übergeben.

Habt ihr eine Idee?

LG Jonas

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen