Javascript (jQuery) / HTML Button mehrmals verwenden?

Hey, ich habe euch hier gleich mal ein JsFiddle verlinkt damit ihr mein Problem besser verstehen könnt: https://jsfiddle.net/Johnny3_3/dqqrvm6q/

Wenn ihr auf den Start Button klickt, dann wird durch Javascript (jQuery) der Kreis sichtbar gemacht. Allerdings kann ich durch das erneute klicken auf den Button den Kreis nicht verschwinden und danach nochmal sichtbar machen lassen. Sprich ich will unendlich oft auf den Button klicken können und somit den Kreis sichtbar und unsichtbar machen.

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

germanils

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

16.04.2018, 17:26

$('#start').click(function() {
  $('#circ').toggle();
});

Hier weitere Infos zur Toggle-Funktion:

http://api.jquery.com/toggle/

Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites

Johnny33RL

Beitragsersteller

16.04.2018, 18:10

Okay, nur wenn ich "show" mit rein packe. Das wundert mich dass das auch ohne die show Klasse funktioniert... Woher weiß der Code denn was er machen soll?

regex9

16.04.2018, 18:27

@Johnny33RL

Er wechselt lediglich den Wert des CSS-Properties display von block zu none und andersrum, je nachdem, welchen Zustand das Element gerade besitzt.

Johnny33RL

Beitragsersteller

16.04.2018, 18:28

@regex9

Danke, hab's auch grad herausgefunden :)

Johnny33RL

Beitragsersteller

16.04.2018, 18:09

Wenn ich das mache, dann baut sich der Kreis mit einer animation auf. Kann man diese Animation auch deaktivieren, so dass der Kreis einfach entsteht?

germanils

16.04.2018, 18:10

@Johnny33RL

Link anklicken, Doku lesen ;-)

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

16.04.2018, 17:02

Verzichte auf das Setzen des CSS-Klassenselektors show und nutze stattdessen gleich die jQuery-Funktionen show und hide.

germanils

16.04.2018, 17:26

toggle() ist noch einfacher

Ähnliche Beiträge

Wenn man auf einer Website einen Button integrieren möchte, der die Farbe ändert wenn man mit dem Mauszeiger drüber geht, nutzt man da eher Javascript oder?

jQuery Code dafür? Und der Button soll natürlich wenn man mit der Maus wieder vom Button runtergeht die Ursprungsfarbe annehmen?

...zum Beitrag

jquery function ausführen beim klick auf den eine oder den anderen button?

hallo, ich habe eine jquery function und möchte, dass sie beim klicken auf den eine button und beim klicken auf den anderen button ausgeführt wird.

skript:

$(document).ready(function() {
                $(".kommentarabschicken").click(function(){
                        if($(".kommentareingabe").val() != "") {

                            $.ajax({
                                type: "POST",
                                url: "kommentare.php",
                                data: "kommentareingabe=" + $(".kommentareingabe").val(),
                                cache: false,
                                success: function(html){
                                        $(".scroll").html(html);
                                        $(".kommentareingabe").val();
                                }
                                });
                        }
                        return false;
                    });
                });

jetzt wird sie ausgefürt bei klicken auf kommentarabschicken. Sie soll auch ausgeführt werden, wen man auch kommentaroeffnen klickt. (evtl. wenn die Seite geladen wird)

Vielen Dank im Vorraus!!

...zum Beitrag

Warum kann ich die js nicht einbinden?

Ich sollte ein Programm, welches mein Lehrer geschrieben hat und auf JSfiddle hochgeladen hat, übernehmen, jedoch funktioniert die javascript Datei nicht wenn ich es mit einbinde. Die Css wird aber übernommen. Woran liegt das? Hier ist der Code, so wie ich ihn im Notepad reingefügt habe: https://jsfiddle.net/marvinl/65yx8mqc/1/

...zum Beitrag

Wie kann man einen Button über Javascript unsichtbar machen?

Hi Leute,

ich habe einen Button, der durch ein Javascript sichtbar wird.

<script type="text/javascript"> 
function loc()
{document.getElementById("submit").style.display="block";}
</script>

Aber wie bekomme ich den Button denn überhaupt von Anfang an unsichtbar?

...zum Beitrag

Javascript + CSS animation will nicht funktionieren?

Hallo,

ich kann mir vorstellen, dass hier so einiges falsch ist. Es geht hauptsächlich um die drei letzten Klassen im CSS und um den kompletten JS Code. Ich will, dass die box auf der linken Seite und der Container unterm HR rein sliden.

Weil des Code etwas lang ist hab ich das auf jsfiddle gespeichert:

https://jsfiddle.net/damvn6wy/26/

danke im voraus.

...zum Beitrag

HTML/CSS Kreis Animation um Element bei Klick?

Hey, ihr kennt doch sicherlich die Animationen die Google verwendet. Ihr klickt auf einen Button und um den Button bildet sich ein Kreis beim Klick (Animation). Ich weiß, etwas Blöd erklärt aber falls ihr nicht versteht was ich meine, habe ich euch ein Bild da gelassen. Wir bekomme ich das mit HTML/CSS hin?

...zum Beitrag

Programmierung eines kleinen Spiels mit html, css und jquery?

Hallo!

Ich studiere seit einem Semester Mediendesign und lerne dabei auch etwas über das Programmieren (bisher html, css und jquery), welches aber nicht meine Stärke ist.

Nun sollen wir als Klausurersatzleistung ein kleines Spiel programmieren und ich bin in etwas überfordert.

Eine Idee habe ich aber die Umsetzung fällt mir schwer.

Erstmal weiß ich nicht wie ich die Seiten, die aufeinander folgen sollen, wenn man z.B. einen "Weiter"-Button klickt, verknüpft.

Ich glaube sowas kann ich mit iFrames machen aber wie gesagt, ich bin wirklich noch Anfänger auf dem Gebiet.

Hier ein Beispiel, wie ich das meine: http://studienarbeiten.bib.de/lernsoftware/schatz_von_gizeh/spielstart.html

Also, wie kann ich meine aufeinanderfolgenden Spieleseiten verbinden?

...zum Beitrag

(Javascript) Text bei Klick auf Button in Zwischenablage kopieren?

Hallo, ich bastle mir gerade eine Seite zusammen und stehe nun vor einem Problem, wo selbst Google nicht helfen konnte, und zwar:

Wenn ich auf einen Button klicke, soll ein für den Leser unsichtbarer Text automatisch in die Zwischenablage kopiert werden.

Beispielsweise steht auf dem Button "2+2=" und wenn ich auf den Knopf klicke, ist automatisch die Ziffer "4" in der Zwischenablage.

Bin über jede Hilfe dankbar! :)

...zum Beitrag

Javascript verlinken funtioniert nicht?

Hallo,

Ich habe das seltsame Problem, dass ich eine Javascript Datei nicht verlinken kann. Bzw. dass der Inhalt auf der Javascript Datei nicht ausgeführt wird.

So habe ich die Datei im <head> Tag verlinkt:

Der Inhalt auf der Javascript Datei ist folgender:

"use strict"

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

Wenn ich den Javascript Code allerdings in der selben HTML Datei ausführe mit

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

</script>

funktioniert er.

Woran kann das liegen? Ich habe schließlich weitere Javascript Dateien verlinkt die alle funktionieren. Auch habe ich die JQuery Datei im <head> Tag verlinkt. Ich benutze den aktuellen Chrome Browser. Mit Firefox habe ich es auch schon probiert. Dort geht es auch nicht.

Als Editior verwende ich Visual-Studio-Code.

Ich bin gerade ziemlich verwirrt. Habe ich irgendwo einen Fehler gemacht?

...zum Beitrag

HTML und CSS - Box erscheint nach Klick auf Button und verschwindet nach Klick auf Text wieder?

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zum Beitrag

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

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

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

JQuery Tabellenzeile löschen?

Hallo miteinander,

Ich bin noch ein ziemlicher Anfänger, was JQuery angeht. Ich musste bisher in meinem Praktikum eine Tabelle mit html und css designen. Dies habe Ich auch ohne Probleme hinbekommen. Jetzt jedoch muss Ich die "Zeile hinzufügen / löschen"-Buttons auch zum Laufen bringen.

Bisher habe Ich es so geregelt, dass Ich in der Ur-Zeile keinen Löschen-Button habe und der sich mit einem Klick auf den "Hinzufügen"-Button allesamt mit einer neuen Zeile hinzufügt.

Ich habe es so programmiert, das er es in die Konsole schreibt, wenn man den Button klickt. Dies ist jedoch nicht der Fall. Habe Ich irgendeinen Fehler?

if ("") {
    $("tbody").append(Neue_Zeile);
} else {
    alert = "Du musst jedes Feld ausfüllen"
}


});

$("#button_delete").on("click",function(){

    console.log("Löschen-Button wurde geklickt");

if (""){
    $("tbody").remove(Neue_Zeile);
} else {
    alert = "Du musst erst eine Zeile hinzufügen, um sie löschen zu können"
};

})

Ganz oben wollte Ich angeben, dass er erst eine Zeile hinzufügt, wenn alle Felder ausgefüllt sind. Was soll Ich da dann nach dem "if" in die Klammer schreiben?

Genauso wie bei dem Löschen-Button. Wie kann Ich da nur die Zeile löschen, auf die der angeklickte Button liegt?

Ich danke für eure Antworten! Bitte schreibt die Antwort nicht all zu kompliziert :P

Mit freundlichen Grüßen, Robert Kessler

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen