✔ mit onclick javascript ausführen

CreativPur

CreativPur

Erfahrenes Mitglied
Hi,

ich möchte einem Button zwei befehle ausführen lassen.. Der eine läuft über die ID "add_row" den zweiten möchte ich über onclick erreichen..

Der Button:
Code: 
<button name="bw_zusammenstellen" id="add_row" class="btn btn-info pull-right" value="bw_zusammenstellen" onklick="bw_zusammenstellen()">
                                                                        Weitere Bw zusammenstellen
                                                                        </button>

Das Script:
Code: 
<script type="text/javascript">

$(document).ready(function(){
    $('input[type="button"]').click(function(){
        if($(this).attr("value")=="bw_zusammenstellen"){
            $(".bw_zusammenstellen").toggle();
        }
      
    });
});

</script>

Die add_row-Funktioniert, aber nicht das onclick..
Wo liegt der Fehler ?

Vielen Dank
 
Zuletzt bearbeitet:
Hallo,

mir ist die Fragestellung ehrlich gesagt etwas unklar. Was soll dieser 1 Button genau machen und warum soll einmal die ID und das andere mal der Wert als Selektor genutzt werden?

Mir ist aber schon mal Folgendes aufgefallen:
1. Im HTML steht onklick. Das muss natürlich onclick heissen. Verstehe aber den Sinn an dieser stelle nicht, wenn doch das onClick Event per jQuery ausgeführt wird.
2. Die jQuery Selektion würde ich eher folgendermaßen schreiben:
Javascript: 
$(document).ready(function(){
    $('button').on('click', function(){
        if($(this).attr("value") == "bw_zusammenstellen"){
            $(".bw_zusammenstellen").toggle();
        }
    });
});

2.1. Du benutzt in deinem HTML <button> und nicht <input type="button">, also musst du im jQuery auch mit $('button') alle Buttons im HTML ansprechen.
2.2. In jQuery ist die onclick Syntax: on('click', function(){code});

Um einen Effekt zu sehen hier mal der angepasste HTML-Code:
HTML: 
<button name="bw_zusammenstellen" id="add_row" class="btn btn-info text-right" value="bw_zusammenstellen">Weitere Bw zusammenstellen</button>

<div class="bw_zusammenstellen">Jetzt sieht man den Inhalt des DIVs, nach Klick auf den Button nicht mehr</div>


EDIT: Über folgenden Link bekommst du noch ein Beispiel anhand deines Codes wie man zwei Events mit einem Klick auslöst. Folgend wird ein DIV per toggle() ein- und ausgeblendet und gleichzeitig wird per Klassenwechsel die Buttonfarbe angepasst.
https://jsfiddle.net/rince/mk5yypf8/2/



Am besten beschreibst du nochmal genauer was der Button auslösen soll, dann kann man deine Frage bestimmt konkreter beantworten.

LG
rince
 
Zuletzt bearbeitet:
vielen Dank für die schnelle Antwort...
Hat mir viel geholfen..

Ich habe jetzt nochmal ein ähnliches Problem..
Ich habe einen Button, der ein DIV-Element öffnet. Mit dem gleichen Button lässt sich dieses DIV auch wieder schließen.
Demzufolge habe ich den Titel des Button einen anderen gegeben.
All das funktioniert auch wunderbar..
Nur wenn ich das zweite mal auf den Button klicke, bekommt er den ursprünglichen Titel nicht zurück.

Beim ersten Klick..
Button --> Nachricht lesen --> Klick --> Div öffnet sich und Button bekommt den Titel "Nachricht schließen".
Wenn ich erneut den Button klicke..
Button --> Nachricht schließen --> DIV schließt und nun soll der Button wieder "Nachricht lesen" darstellen..

Folgenden Code habe ich

Code: 
<button type="button" class="btn btn-success btn-xs" id="id_btn02" value="erhaltene_lesen">Nachricht lesen</button>


<div class="erhaltene_lesen box" ><strong>Nachrichten-Text</strong><div>

$(document).ready(function(){
    $('button').on('click', function(){
        if($(this).attr("value") == "erhaltene_lesen"){
            $(".erhaltene_lesen").toggle();
            $(".erhaltene_antworten").toggle(closed);
            $(this).html("Nachricht schliessen");
        }
    });
 
...weil dein doppeltes Thema "Button Titel ändern" zwischenzeitlich von einem Mod kompostiert wurde, hier nochmal mein Post, damit dir die Links nicht abhanden kommen :cool:
SpiceLab hat gesagt.:
Google hätte dich da nicht so viel (Warte)Zeit gekostet :D
  1. http://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
  2. http://stackoverflow.com/questions/...text-show-hide-show-on-click-in-jquery-toggle
  3. http://stackoverflow.com/questions/13148093/toggling-button-text-in-jquery
  4. http://stackoverflow.com/questions/19365386/jquery-change-button-text-on-click
Zum Vergrößern anklicken....
 
Wieder ein paar Punkte:

1. Wenn du das HTML Element <button> verwendest musst du diesem Element nicht mehr den Typ button (type="button") zuweisen.
2. Das Attribut value halte ich auch für überflüssig und als Selektor für jQuery zu aufwändig. Deshalb habe ich das in meinem Beispiel weggelassen.
3. Zwar hatte ich in meiner ersten Antwort exemplarisch als Selektor für den Button $('button') aufgezeigt, das ist aber keine gute Lösung, da du damit alle <button> Elemente im Dokument ansprichst. Wenn dein Button sowieso eine ID hat dann sprich am besten den Button über die ID an, da diese nur einmal im Dokument verwendet werden darf: $('#id_btn02')

Folgend mein Lösungsansatz dazu:
HTML: 
<!--
Folgende Anpassungen am HTML habe ich vorgenommen:
1. type="button" entfernt, weil überflüssig
2. value="erhaltene_lesen" entfernt, da ich hier auch keinen Sinn sehe
-->
<button class="btn btn-success btn-xs" id="id_btn02">Nachricht lesen</button>

<!-- Beim DIV habe ich noch ein style="display:none" eingefügt, damit das DIV anfangs nicht sichtbar ist. Das sollte am besten über eine Klasse gelöst werden. -->
<div class="erhaltene_lesen box" style="display:none" >
    <strong>Nachrichten-Text</strong>
<div>

Javascript: 
$(document).ready(function(){
    // Den Button über dessen ID (#id_btn02) auswählen + onClick Event
    $('#id_btn02').on('click', function(){
        // Div mit der Klasse .erhaltene_lesen ein-/ausblenden
        $(".erhaltene_lesen").toggle();
        // Button-Text auslesen + IF-Abfragen
        // Wenn der Button-Text "Nachricht lesen" ist...
        if($(this).text() == "Nachricht lesen"){
            // ...ändere den Button-Text zu "Nachricht schließen"
            $(this).text("Nachricht schließen");
        }
        // in allen anderen Fällen...
        else {
            //...ändere den Button-Text zu "Nachricht lesen"
            $(this).html("Nachricht lesen");
        }
    });
});

https://jsfiddle.net/mk5yypf8/4/

Ich habe den Code extra kommentiert, damit es besser nachvollziehbar ist. Ich hoffe das bringt dir ein bisschen mehr Verständnis. Einfach nur eine Lösung kopieren ohne es vollständig nachvollziehen zu können bringt einem schlußendlich auch wenig.

Vielleicht hast du dich zwischenzeitlich durch die Links gewühlt und festgestellt, dass dort die unterschiedlichsten Ansätze geliefert werden. Ich bevorzug die oben dargestellte Variante, da sie meiner Meinung nach am einfachsten nachzuvollziehen ist (auch wenn man sich den Code später nochmal anschaut). Meine Variante ist dafür nicht unbedingt die performanteste Art.
 
Super... Vielen Dank...

Endlich mal einer, der nicht von SEINEM KÖNNEN ausgeht und es super erklärt...

Vielen DANK
 
Man kann das Ganze auch noch etwas schöner schreiben:
Javascript: 
$(function() { // ist das Gleiche wie $(document).ready(function() { ...
  $("#id_btn02").toggle(
    function() {
      $(".erhaltene_lesen").toggle();
      $(this).text("Nachricht schließen");
    },
    function() {
      $(".erhaltene_lesen").toggle();
      $(this).text("Nachricht lesen");
    }
  );
}
 
Freut mich, dass ich dir weiterhelfen konnte.

@crack: Klasse, das bringt mich nun wiederum weiter. Bin selbst noch am lernen, vorallem was die Code-Optimierung angeht. :)
 
einfach nur crack hat gesagt.:
Man kann das Ganze auch noch etwas schöner schreiben:
Javascript: 
$(function() { // ist das Gleiche wie $(document).ready(function() { ...
  $("#id_btn02").toggle(
    function() {
      $(".erhaltene_lesen").toggle();
      $(this).text("Nachricht schließen");
    },
    function() {
      $(".erhaltene_lesen").toggle();
      $(this).text("Nachricht lesen");
    }
  );
}
Zum Vergrößern anklicken....

@crack: Jetzt habe ich mir deinen Code nochmal genauer angeschaut und ihn in JSFiddle eingebaut. Der Code funktioniert nicht.
https://jsfiddle.net/mk5yypf8/6/
 
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.
Zum Vergrößern anklicken....
(Zitat aus der Doku von jQuery für die Funktion toggle(handler, handler).) Im Fiddle benutzt Du jQuery 1.11.
Außerdem hast Du links "onLoad" ausgewählt und zusätzlich im Javascript $(function(){ verwendet. Beides zusammen funktioniert nicht.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück