Button mit zwei funktionen

[Conkuist]

Habe biss jetzt einfach nichts gefunden
kenn mich schon ein bisschen mit javascript aus
aber finde leider keine lösung für mein problem

Ich möchte einen button der z.B den text rot färbt und wenn man ihn nochmal drückt soll der text wieder schwarz werden

leider hab ich es bisher nur mit zwei buttons geschafft statt mit einem

<script>
function rot(){document.getElementById("text").style.color="red";}
function schwarz(){document.getElementById("text").style.color="black";}
</script>
<button onclick="rot()">Rot</button><button onclick="schwarz()">Schwarz</button>
<p id="text">Hallo</p>

 

[Tronjer]

In dem Fall sollte die Funktion vorher die Textfarbe abfragen.

 

[Conkuist]

wie würde das genau aussehen

 

[Asterixus]

jQuery ist gerade da, um sowas ganz einfach zu lösen. Binde jQuery ein und gib dem Button 'ne ID (ich gehe von id="change_color_button" aus) und definiere für jede Farbe eine CSS-Klasse (sagen wir .rot .schwarz) (direkt mit dem Style-Attribut zu spielen ist nicht gut; genauso wie onclick im HTML zu definieren):

$("#change_color_button").click(function () {
    var $text = $("#text");
    if ($text.is(".rot")) {
        $text.addClass("schwarz").removeClass("rot");
    } else {
        $text.addClass("rot").removeClass("schwarz");
    }
});

 

[Tronjer]

Mit jQuery könnte das etwa so aussehen.

ungeprüft:

$('#text').on('click', function() {
    var textColor = $(this).css('color');
    textColor == '#000' ? $(this).css('color', '#f00') : $(this).css('color', '#000');
})

 

[Conkuist]

Habe es leider nicht geschafft das es funktioniert
Könntet ihr das bitte so machen wie ich oben

<style>
$("#change_color_button").click(function () {
var $text = $("#text");
if ($text.is(".rot")) {
$text.addClass("schwarz").removeClass("rot");
} else {
$text.addClass("rot").removeClass("schwarz");
}
});
</style>
<button id="change_color_button">Farbe</button>
<p id="text">Hallo</p>

Was hab ich falsch gemacht?

 

[Tronjer]

Du hast das Script in einen <style> Container gesetzt und rufst es auf, bevor der Button erzeugt wird.

 

[Conkuist]

<button id="change_color_button">Farbe</button>
<p id="text">Hallo</p>

<script>
$("#change_color_button").click(function () {
var $text = $("#text");
if ($text.is(".rot")) {
$text.addClass("schwarz").removeClass("rot");
} else {
$text.addClass("rot").removeClass("schwarz");
}
});
</script>

geht trotzdem nicht

 

[Asterixus]

Dann wechsle dein Hobby, Programmieren ist für dich nichts. Ich habe dir schon gesagt, was gemacht werden muss.

 

[Conkuist]

<style>
#text.rot{color:red;}
#text.schwarz{color:black;}
</style>

<button id="change_color_button">Farbe</button>
<p class="rot" id="text">Hallo</p>
<script>
$("#change_color_button").click(function () {
var $text = $("#text");
if ($text.is(".rot")) {
$text.addClass("schwarz").removeClass("rot");
} else {
$text.addClass("rot").removeClass("schwarz");
}
});
</script>

Kannst mir ja wenigstens nen Tipp geben was falsch ist

 

[Tronjer]

<button id="change_color_button">Farbe</button>

geht trotzdem nicht

Ein reines copy & paste reicht eben manchmal nicht.

Das hier geht:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

//Farbzuweisung per Inline-CSS
$('#change_color_button').on('click', function() {
  var textColor = $('#text').css('color') === 'rgb(0, 0, 0)' ? 'rgb(255, 0, 0)' : 'rgb(0, 0, 0)';
  $('#text').css('color', textColor);
})

//CSS-Klassenzuweisung mit Toggle
$('#change_color_button').on('click', function() {
  $('#text').toggleClass('red');
});
</script>

 

[Asterixus]

<style>
#text.rot{color:red;}
#text.schwarz{color:black;}
</style>

<button id="change_color_button">Farbe</button>
<p class="rot" id="text">Hallo</p>
<script>
$("#change_color_button").click(function () {
var $text = $("#text");
if ($text.is(".rot")) {
$text.addClass("schwarz").removeClass("rot");
} else {
$text.addClass("rot").removeClass("schwarz");
}
});
</script>

Kannst mir ja wenigstens nen Tipp geben was falsch ist

Deine Einstellung ist falsch. Du liest dir nicht mal Beiträge vollständig durch und Debugging ist dir auch kein Begriff.

 

[Conkuist]

Jetzt probier ich schon ewig lang rum und es gehtimmer noch nicht
Tut mir leid wenn ich mit deiner Anleitung nichts anfangen kann
aber sehr hilfreich ist das alles hier nicht wirklich

 

[Asterixus]

Muss man dir die Würmer wirklich aus der Nase ziehen? Was sagt die Fehlerkonsole bzw. Firebug?

 

[Tronjer]

aber sehr hilfreich ist das alles hier nicht wirklich

Lol?

Naja, ich bin raus. Viel Erfolg noch bei zukünftigen Fragen.

 

[Conkuist]

Kennt jemand ein gutes Java Script Tutorial für Grundlage und für später eines das sich mit Steuerung von Elementen befasst