Gimmick-Button mit JavaScript

[Kopfkissen]

Hi,

ich brauche ein wenig Hilfe. Vorweg: ich hab so gut wie keine Ahnung von JavaScript.

Worum geht es?
Ich will auf meiner Webseite einen Button haben, der auf Klick von rot nach grün und die (weiße) Beschriftung sowie das eingebundene FontAwesome-Icon wechselt.

Die Herausforderung:
Wie gesagt hab ich selber keine Ahnung und das ganze ist in einem mit Visual Composer zusammengeklickten Wordpress-Theme, das macht das alles nicht einfacherer.

Was im Moment da ist:
Der Code des Buttons, und ich kann ein onclick-Code direkt eingeben. Hier der Code (die "akkubutton" Klasse hab ich selbst eingetragen):

<div class="vc_cta3-actions">
<div class="vc_btn3-container akkubutton vc_btn3-center">
    <button
    style="background-color:#911912; color:#ffffff;"
    class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-custom vc_btn3-icon-left"
    
    onclick=" ">
    
    <i class="vc_btn3-icon fa fa-battery-quarter"></i> Akku laden...
    
    </button>
</div>
</div>

Ist das machbar? Wenn ja: wie?

 

[oglimmer]

http://jsbin.com/saludaquge/edit?html,output

Das ist ohne 3rd party libs.

- hab dem button und dem i tag eine ID gegeben
- hab eine javascript function gemacht und die auf onclick hinterlegt
- hole ueber getElementById referenzen auf den button und den i tag
- setzte style bzw class auf neue werte

das kann man auch alles anders (und durchaus schoener) machen, aber die loesung zeigt wie man sowas grundsaetzlich machen kann.

 

[Kopfkissen]

Danke! Das sieht an für sich gar nicht so wahnsinnig kompliziert aus (Notiz an mich: irgendwann JavaScript lernen..)
Ich kann den Button über deinen Code einbauen, nur leider funktioniert das Script bei mir nicht. Ich kann den Button klicken, aber es ändert sich nichts. Einigen Recherchen nach verwendet Wordpress jQuery im noConflicts-mode, vielleicht hängt das damit zusammen?

 

[oglimmer]

Ich hab extra kein jQuery verwendet, daher hat mein Script keine Abhaengigkeit darauf.

Jeder Browser hat einen "Developer Modus" der auch JavaScript Errors anzeigt, da solltest du schauen und uns sagen, welchen Fehler er ausspuckt.

 

[Kopfkissen]

Wenn du noch ein weiteres Mal helfen willst: Wie ändere ich denn den Text in dem Button auf Klick? Dann muss der Text "Akku laden..." mit deinem Code ja irgendwie in der Klasse schon definiert sein, sehe ich das richtig?

 

[oglimmer]

wir haben zwar schon eine Referenz auf den button, aber da ist ja nicht nur der Text drin, sondern auch noch das Symbol.

jetzt hat man 2 moeglichkeiten:
(a) man aendert den Text und packt das symbol wieder mit dazu
(b) man gibt dem text einen eigenen tag mit eigner id, dann kann man den einfach aendern ohne das symbol kaputt zu machen

ich wuerde mich spontan fur B entscheiden und das sieht dann so aus:
http://jsbin.com/wacogohizo/edit?html,output

 

[Kopfkissen]

Tausend Dank!

Es ist zwar echt ne absolute Spielerei, die ich hier verfolge, aber jetzt funktioniert es. Sobald meine dann aktualisierte Webseite online geht, poste ich hier nochmal den Link, damit du dein Werk bewundern kannst ;-)

Grüße,
Kopfkissen

 

[oglimmer]

Na da bin ich gespannt

 

[Kopfkissen]

So,
hier der Link: https://www.davidlohner.de
@oglimmer: Dein Beitrag findest du unter dem Menüpunkt "David der Drummer"

Bitte nicht über den wirren Code schimpfen, ist alles mit dem Visual Composer für Wordpress entstanden. Der erstellt halt mal tausende divs... Die Seite ist noch nicht 100%ig für mobile Geräte optimiert, da bin ich aber dran. Wichtig ist erstmal, dass sie online ist, die eigentlichen Inhalte (Blog) kommen jetzt nach und nach...

 

[IKWIL]

Zum Technischen kann ich nichts beitragen, nur so interessehalber: Dein Problem wurde gelöst, ich frage mich allerdings, ob bei der Aktion (Wechsel von rot nach grün) noch was kommt? Ich hatte jetzt das Abspielen eines Drum-Sample beim Wechsel erwartet oder irgendwas mehr außer dem Farbwechsel. Zumindest würde sowas die ganze Aktion noch etwas würzen. Ist jetzt konstruktiv gemeint.

 

[Kopfkissen]

Haha, nein es kommt wirklich nichts. Aber die Idee ist cool. Ein Takt Groove oder sowas..

Ich schätze aber, dass das etwas aufwändiger ist, damit das auf allen Browsern und allen Geräten funktioniert. Wie gesagt; vom eigentlichen Code hab ich wenig Ahnung. Ein Sample in verschiedenen Formaten (mp3/m4a/ogg-vorbis) bereitstellen wäre aber das kleinste Problem.

 

[MacMac512]

Das wäre für mich ein Grund die Seite nie wieder zu besuchen. Ich bin froh, das diese unendliche Animations/Filmchen/Sampleorgie der 90-00er Jahre endlich vorbei ist.

Ich finde wirklich nichts nerviger als ungefragt Musik die sich nicht abschalten lässt und mich "zwangsbeglückt" nur weil ich einen Button gedrückt habe. Wenn es keinen Mehrwert hat und nur Mittel zum Zweck ist, dann sollte man sowas lieber gleich lassen.

Ist auch nichts zum Thema selbst, aber eine Meinung eines potentiellen Besuchers.

 

[Kopfkissen]

Sehe ich auch so. Deshalb auch erstmal nur der Farbwechsel. Ein Sound-Sampel wäre schon sehr überkandidelt.

 

[Olivetti]

Drum-Sample... Ist jetzt konstruktiv gemeint.

auch meine meinung.
bei einem drummer *kein* sample zu erwarten, finde ich hingegen seltsam.
mindestens einen kleinen amen break sollte man schon hören dürfen.