JavaScript toggle color onclick?

Hallo.

Ich möchte in einem HTML Dokument mit JS die Farbe einer Schrift durch Klicken ändern. Default soll es beispielsweise schwarz sein, wenn man auf den Text klickt soll es grün werden. Bei einem zweiten Klick soll die Schrift wieder schwarz werden.

Ich habe viel ausprobiert, komme aber nicht zum Ziel.

Vielleicht könnt Ihr mir helfen? Vielen Dank im Vorraus!

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

04.10.2019, 20:12

Zuerst einmal benötigst du einen Listener für das Klickevent:

<p id="text"></p>
<script>
  var textElement = document.getElementById("text");
  textElement.addEventListener("click", function(evt) {
    // your code to handle click ...
  });
</script>

Dann kannst du noch einen CSS-Klassenselektor definieren, welcher die zweite Schriftfarbe setzt. Über das classList-Property kannst du die toggle-Methode nutzen, um die zweite Klasse dem textElement hinzuzufügen oder wieder zu entfernen.

Die Standardfarbe solltest du anschließend auch noch im CSS festlegen. Bspw. via Elementselektor:

p { color: black; }

Tyldu

04.10.2019, 20:16

ganz einfach: https://jsfiddle.net/w6vud2qn/

beim klicken prüfst du ob die css klasse die den alternativen style hat vorhanden ist bei dem objekt und dementsprechend entfernst du diese klasse entweder oder fügst sie eben hinzu.

noch einfacher mit der toggle funktion wie regex erwähnt.

Woher ich das weiß:Studium / Ausbildung – Softwareentwickler, B. Sc. Informatik

...zur Frage

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

...zur Frage

Checkbox Farbe ändern bei onclick JavaScript/CSS?

Wie ändere ich die Farbe der Checkbox ?

Bei mir ist standartmäßig der background in einem blauton und der haken weiß.

Habe schon versucht zu googeln und dort stand das eine input type=checkbox kein richtigen hintergrund hat. Ist es nicht irgendwie möglich die Farbe bei "checked" grün zu stellen und beim nicht klicken rot.

...zur Frage

Wie funktioniert Capturing oder Bubbling in Javascript?

Hallo, habe eine Frage zum folgenden Artikel:

https://molily.de/js/event-handling-effizient.html

Das Event selbst, ist das z.B. ein Klick? Der Klick geht dann durch den "ganzen Aufbau" und löst dann, wenn ein Eventlistener vorhanden ist etwas aus? Und wie wird dann der Zielort definiert? Woher kann der Computer dann ohne den Eventlistener zu kennen unterscheiden, ob er Bubbling oder Capturing anwendet?

Danke

...zur Frage

Warum über JavaScript Events?

man kann ja in seinen html code onclick oder was auch immer für ein Event hinschreiben.

ich sehe trotzdem bei vielen Profis immer das hier

Html : 

<body>
<button id='MeinButton'>Senden</button>
</body>

js: 

document.querySelector('#MeinButton').addEventListener('click', MeineFunktion);

function MeineFunktion(){
event.preventDefault();
Alert(1);
}

einfacher wäre das hier

<body>
<button onclick='MeineFunktion();' id='MeinButton'>Senden</button>
</body>
function MeineFunktion(){
event.preventDefault();
Alert(1);
}

Und wieso muss man prevent default hinschreiben ?
Was genau macht der browser denn by default / standardmäßig das es sonst nicht funktioniert ?

...zur Frage

Aus einer Txt eine Js Datei machen (txt dokument erstellen und daraus Javascript?

Bitte Helft mir

...zur Frage

JavaScript: Wieso funktioniert mein Dropdownbutton nicht?

Der Dropdownbutton funktioniert nicht, obwohl Bootstrap verlinkt wurde. Was könnte der Grund sein?

HTML:

  <div class="col-sm-4 col-md-4 " onclick="sortFunction()" style="color: white;text-align: right;">
    <div class="dropdown">
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:white;">Sort By</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Most Liked</a>
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Least Liked</a>
      </div>
    </div>
  </div>
</div>

JavaScript:

function mostLikedSortFunction() {
  movies.sort(function(a, b){return b.num_of_likes - a.num_of_likes});
  CreateMoviesFromJson();
}

function leastLikedsortFunction() {
  movies.sort(function(a, b){return a.num_of_likes - b.num_of_likes});
  CreateMoviesFromJson();
}

...zur Frage

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?

...zur Frage

JavaScript warten, bis sich Variable ändern?

Ich habe ein Formular mit einem Submit-Button.

<button onClick={() => submitHandler("fromSubmitButton")}>Submit</button>

Die submitHandler Funktion sendet über einen Websocket eine Nachricht an den Server, ohne eine direkte Antwort zu bekommen, wie es mit async/await funktionieren würde:

socket.emit('email-submit', value)

Nach einiger Zeit kommt vom Server bzw. Websocket eine Nachricht:

        socket.on('badEmailORphone', function(msg) {
            setBadEmailORphone(msg)
        });

In der Zeit zwischen dem Klick auf Submit und setBadEmailORphone gesetzt wird, möchte ich einen Ladescreen einblenden.

Rein logisch müsste ich den Ladescreen ab Klick auf den Submit-Button bis setBadEmailORphone setzen, aber wie kann ich in JavaScript x Sache machen, bis sich eine Variable ändert?

Meine erste Theorie war:

Submit onClick:

while(!setBadEmailOrphone) setLoading(true) //Mit etwas Delay zwischen Durchläufen

...zur Frage

JS script richtig importieren?

Wenn ich meine JS Skripte in meinem HTML Dokument schreibe funktionieren die Super. Wenn ich diese dann aber in den Header Schreibe

 <script type="text/javascript" src="scripts/JavaScript.js"></script>

Dann geht alles was mit dem Script zutun hat nicht.

...zur Frage

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

...zur Frage

javascript und css kombinieren?

Ich will eine Stecknadel an der stelle setzen lassen wo man klickt weiß aber nicht wie ich meine x und y variablen in css einsetzen kann, oder gibt es einen weg css in js zu benutzen?

...zur Frage

JavaScript: Bei jedem Klick plus 1 in der resultArea?

Moin, ich habe einen Button gemacht und zwar:

<div onclick="play()" class="button">
  <button class="button1">
    Bam
  </button>
</div>

und eine Result Area

<div id="resultArea"></div>

Wie kann ich es machen, dass bei jedem Klick auf den Button in der Result Area 1 addiert wird (sowas wie ein Cookie-Klicker)? Also so eine Art Counter.

...zur Frage

linkfarbe ändern , nur html! ohne csss oder javascript?

Ich baue gerade eine newsletter und will die Farbe der Links in schwarz haben wie der text. Kann man das für das ganze Dokument regeln ohne CSS?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen