Ankündigung

Einklappen
Keine Ankündigung bisher.

Span class per Javascript ein/ausschalten

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Span class per Javascript ein/ausschalten

    Hallo Zusammen,

    Ich habe ein Bootstrap 4 Form mit einem submit Button. Vor dem absenden der Form steht auf dem Button "Person suchen".
    Sobald der Button geklickt wird, wird das Form gesendet und es soll innerhalb des Buttons ein Spinner(Kreisel als Wait-Cursor) erscheinen und der Text des Buttons soll umgestellt werden auf "Person wird gesucht..."
    Das Problem ist, wenn ich Methode "personSuchenStart" ausgeführt wird, wird der spinner nicht aktiv. Wenn jedoch die zweite Zeile mit dem Textersetzen auskommentiert wird, wird der Spinner angezeigt.
    Jedes für sich alleine funktioniert, zusammen jedoch nicht.
    Hat jemand eine Idee?



    HTML-Code:
    <button class="btn btn-primary btn-lg btn-block" type="submit" value="suchen" id="suchenBtn">
           <span class="spinner-border spinner-border-sm" role="status" id="btnSpinner" style="display: none"></span>
              Person suchen
    </button>
    Code:
    function personSuchenStart(data){
        document.getElementById("btnSpinner").style.display = '';
        document.getElementById("suchenBtn").innerText = 'Person wird suchen...';
    }

  • #2
    Code:
    function personSuchenStart(data){
            alert(document.getElementById("suchenBtn").innerHTML);
    
            document.getElementById("btnSpinner").style.display = '';
            document.getElementById("suchenBtn").innerText = 'Person wird suchen...';
    
            alert(document.getElementById("suchenBtn").innerHTML);
    }
    Signaturrrrrrr

    Kommentar


    • #3
      auch innerHTML habe ich ausprobiert, leider ohne erfolg.
      Wie gesagt, wenn ich die Zeile
      Code:
        
       document.getElementById("suchenBtn").innerText = 'Person wird gesucht...';
      auskommentiere, wird die erste Zeile ausgeführt und der Spinner ist sichtbar und dreht sich.

      Kommentar


      • #4
        Zitat von R1100 Beitrag anzeigen
        auch innerHTML habe ich ausprobiert, leider ohne erfolg.
        Wie gesagt, wenn ich die Zeile
        Code:
        document.getElementById("suchenBtn").innerText = 'Person wird gesucht...';
        auskommentiere, wird die erste Zeile ausgeführt und der Spinner ist sichtbar und dreht sich.
        dann, einfach meine Variante des Codes, so lang aufzurufen, bis es endlich funktioniert...
        Signaturrrrrrr

        Kommentar


        • #5
          Der Hinweis von K313 ist OK. Er meint auch sicher nicht, dass Du den Code 1000mal aufrufen sollst.

          Ein kleiner Hinweis meinerseits. Ersetzen/replace könnte dich hier schon erheblich weiterbringen:

          Code:
          El.innerHTML = El.innerHTML.replace('xxx','yyy')

          Kommentar


          • #6
            HTML-Code:
            document.getElementById("suchenBtn").innerText = 'Person wird gesucht...';
            Du greifst auf den Inhalt vom Element Button zu und änderst alles was innerhalb des Elementes steht.
            HTML-Code:
                <button type="submit" value="suchen" id="suchenBtn">
            
                </button>
            Da dort auch das Span Element steht, wird dieses auch ersetzt.
            Du kannst nun den Text nach dem Span Element auch in ein Element packen, ein weitereres Span mit eigener ID und kannst dann explizit nur darauf zugreifen.
            Zum Testen habe ich mal ein Zeichen an die Stelle eingeführt, da ich ja dein CSS nicht habe.
            HTML-Code:
                <button type="submit" value="suchen" id="suchenBtn">
                   <span id="btnSpinner" style="display: none">#</span>
                   <span id="btnText"> Person suchen </span>
                </button>
            Das erfordert jedoch einen Eingriff in das HTML, was oftmals ein Template ist und ist daher weniger schön.


            Alternativ schaust du dir die Kindknoten an, die innerhalb des Elementes Button stehen.
            Da findest du 3 Knoten, 3 deshalb, da vor dem Span ein Leerzeichen ist, welches auch ein Kindknoten darstellt..
            Das letzte Kindelement ist das, welches du ändern willst, da es nach dem Span kommt und genau darauf musst du zugreifen und dieses ändern.

            HTML-Code:
                <button type="submit" value="suchen" id="suchenBtn">
                   <span id="btnSpinner" style="display: none">#</span>
                    Person suchen
                </button>
            Javascript
            HTML-Code:
            ...
            document.getElementById("btnSpinner").style.display = 'inline';
            document.getElementById("suchenBtn").lastChild.textContent = 'Person wird gesucht...';
            ...
            Jetzt hast du als Ergebnis " # Person wird gesucht..." als Text im Button stehen.

            Kommentar


            • #7
              Ganz große Klasse, tausend Dank Euch!!

              Vielen herzlichen Dank auch für die Erklärung warum es schief läuft. Ich habe einfach das span Element ersetzt. Damit hab eich nicht gerechnet.
              Ich habe beide Varianten ausprobiert lastChild und replace natürlich funktionieren beide Methoden einwandfrei.

              Euch noch einen schönen Tag.

              Kommentar

              Lädt...
              X