Bernd: Feld ausblenden

Hallo,

ich blende so ein Feld aus

$( "#pause" ).click(function(){
  $('div#div_ende').hide();
});

Das Feld soll auch ausgeblendet werden, wenn in #pause etwas steht. Außerdem soll das Feld wieder eingeblendet werden wenn ich den Inhalt in #pause entferne.

Wie könnte ich da vorgehen? Ich darf nicht nur auf click reagieren?

  1. Tach!

    Das Feld soll auch ausgeblendet werden, wenn in #pause etwas steht.

    Gibt es eine Aktion, die dazu führt, dass in dem Feld etwas steht? Oder anders gefragt, gibt es eine Änderung die zu dem Zustand führt oder ist das bezogen auf den initialen Zustand des Feldes beim Laden der Seite?

    Außerdem soll das Feld wieder eingeblendet werden wenn ich den Inhalt in #pause entferne.

    Das jedenfalls ist eine Änderung.

    Wie könnte ich da vorgehen? Ich darf nicht nur auf click reagieren?

    Logisch, oder? Wenn sowohl beim Click als auch bei Änderungen etwas passieren soll, braucht man für beide Ereignisse einen Handler.

    dedlfix.

    1. Hallo,

      Gibt es eine Aktion, die dazu führt, dass in dem Feld etwas steht? Oder anders gefragt, gibt es eine Änderung die zu dem Zustand führt oder ist das bezogen auf den initialen Zustand des Feldes beim Laden der Seite?

      nein, in diesem Fall oder zu diesem Zeitpunkt geht es erstmal nur darum wenn ich in das Feld klicke und oder etwas in das Feld schreibe sollen weitere Felder ausgeblendet werden.

      Logisch, oder? Wenn sowohl beim Click als auch bei Änderungen etwas passieren soll, braucht man für beide Ereignisse einen Handler.

      Die Frage ist, auf was muss ich denn sonst noch reagieren?

      1. Moin,

        nein, in diesem Fall oder zu diesem Zeitpunkt geht es erstmal nur darum wenn ich in das Feld klicke und oder etwas in das Feld schreibe sollen weitere Felder ausgeblendet werden.

        Ist das ein input-Element? Dann kannst du .change() setzen.

        Gruß
        Jo

        1. Hallo,

          du meinst so?

          $("#pause").change(function(){
          
          			if($(this).val() == ''){
          			    $('div#div_ende').show();
          			}
          
          			else{
          			    $('div#div_ende').hide();
          			}
          			   	
          		});
          

          Jetzt habe ich ein anderes Problem. Wenn ich in das Feld klicke, etwas schreibe und dann das Feld verlasse werden die anderen erst ausgeblendet. Dieses ist für mich zu spät.

          1. Hallo Bernd,

            in normalem Javascript würde ich es mit dem input-Event probieren, das sollte es in jquery auch geben.

            Gruß
            Jürgen

            1. Hallo,

              danke dir, so klappt es bei mir

              ("#pause").keyup(function(){
              
              			if($(this).val() != ''){
              			    $('div#div_ende').hide();
              			}
              
              			else{
              			    $('div#div_ende').show();
              			}
              			   	
              		});
              
              1. @@Bernd

                danke dir, so klappt es bei mir

                ("#pause").keyup(function(){
                
                			if($(this).val() != ''){
                			    $('div#div_ende').hide();
                			}
                
                			else{
                			    $('div#div_ende').show();
                			}
                			   	
                		});
                

                Bei dir mag das so klappen, bei anderen aber nicht!

                Wenn du auf Änderungen des Werts im Eingabefeld reagieren willst, dann ist keyup das falsche Event. Die Änderungen müssen ja nicht durch Tastatur erfolgen.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Hallo,

                  Bei dir mag das so klappen, bei anderen aber nicht!

                  bei anderen meinst du bei dir? Du bist mal wieder mit einem Handy unterwegs?

                  Wenn du auf Änderungen des Werts im Eingabefeld reagieren willst, dann ist keyup das falsche Event. Die Änderungen müssen ja nicht durch Tastatur erfolgen.

                  Würdest du mir dann vielleicht verraten was ich sonst nehmen soll/kann/darf?

                  1. Hallo Bernd,

                    Würdest du mir dann vielleicht verraten was ich sonst nehmen soll/kann/darf?

                    das, wofür du dich bei mir bedankt hast: input. Allerdings funktioniert das wohl nur mit .on("input", …

                    Gruß
                    Jürgen

                  2. @@Bernd

                    Bei dir mag das so klappen, bei anderen aber nicht!

                    bei anderen meinst du bei dir? Du bist mal wieder mit einem Handy unterwegs?

                    Das geht dich nichts an. Und das war jetzt nicht unhöflich gemeint, sondern: Die Frage solltest du dir gar nicht erst stellen. Baue deine Webseiten robust, d.h. so, dass sie mit verschiedenen Ein- und Ausgabegeräten benutzt werden können.

                    Die Antwort wäre übrigens: nein, nicht Handy.

                    Wenn du auf Änderungen des Werts im Eingabefeld reagieren willst, dann ist keyup das falsche Event. Die Änderungen müssen ja nicht durch Tastatur erfolgen.

                    Würdest du mir dann vielleicht verraten was ich sonst nehmen soll/kann/darf?

                    Das hat Jürgen dir doch schon verraten.

                    Zum Rumspielen, wann welches Event feuert, hier entlang auf die Spielwiese.

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. @@Bernd

    ich blende so ein Feld aus

    $( "#pause" ).click(function(){
      $('div#div_ende').hide();
    });
    

    Warum eigentlich jQuery? Das geht mit Vanilla-JS genauso gut, wenn nicht gar besser:

    document.querySelector('#pause').addEventListener('click', function () {
    	document.querySelector('div#div_ende').hidden = true;
    });
    

    'div#div_ende' ist aber nicht die beste Idee. Was, wenn dir einfällt, dass div nicht das beste HTML-Element dafür ist, sondern bspw. section? Dann müsstest du bei einer Markup-Änderung nochmal das JavaScript ändern‽ Mit '#div_ende' (ohne Elementtyp im Selektor) hast du das entkoppelt.

    Aus demselben Grund sollte die ID aber nicht div_ende lauten, sondern bspw. ende.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann