Wie Text ändern?

  • Hallo,



    ich möchte gerne einen bestehenden Text mittels 3 verschiedenen Möglichkeiten per jeweiligem Button ändern.



    Also z.B.



    Das ist der aktuelle Text....



    [Button: alternativer Text 1]


    [Button: alternativer Text 2]


    [Button: alternativer Text 3]



    Je nach Klick auf den Button sollte sich der Text entsprechend ändern.



    Mit 1 Button bekomme ich das wie folgt hin:



    Code
    1. <script type="text/javascript">function changeContent(){document.getElementById('content').innerHTML = 'der neue Text 1';}</script>
    2. <div id="content">Das ist der aktuelle Text....</div>
    3. <input type="button" value="alternativer Text 1" onclick="changeContent();"/>




    Bekomme das leider nicht hin, 'content' entsprechende IDs zu geben, damit ich den ursprünglichen Text mit verschiedenen Buttons ändern kann.



    Danke für Euer Schwarmwissen

  • Zitat

    Bekomme das leider nicht hin, 'content' entsprechende IDs zu geben

    Das ist gar nicht nötig, weil #content ja das Ziel ist, wohin die Texte sollen und das ist immer das selbe. Wenn der Text jeweils im value-Attribut steht, wie in deinem Code, ist es ganz einfach:

    Code
    1. <script type="text/javascript">
    2. function changeContent(txt){
    3. document.getElementById('content').innerHTML = txt;
    4. }
    5. </script>
    6. <div id="content">Das ist der aktuelle Text....</div>
    7. <input type="button" value="alternativer Text 1" onclick="changeContent(this.value);"/>
    8. <input type="button" value="alternativer Text 2" onclick="changeContent(this.value);"/>
    9. <input type="button" value="alternativer Text 3" onclick="changeContent(this.value);"/>

    Wenn die Text etwas länger werden sollten, ist es eher zu empfehlen, sie in Variablen zu definieren und diese als Parameter an changeContent() zu übergeben.

  • 1. Du solltest bei dem Aufruf der Funktion mit dem 'onclick' einen Parameter übergeben (1 . 2 oder 3) - zB onclick="changeContent(1);"

    2. In der JavaScript Funktion 'changeContent' müssen dann die unterschiedlichen Texte als Variable definiert werden.

    3. Mit dem beim Funktionaufruf übergebenen Parameter, kann dann zB mit einer 'Case' Abfrage jeweils der richtige Text eingefügt werden - https://www.w3schools.com/js/js_switch.asp

  • Ich würde ja auch onclick verzichten und die Logik komplett in JS auslagern. Die Texte ( je nach Länge und produktiver Verwendung ) kann ich auch an den dataset der Schaltflächen setzen und direkt drauf zugreifen.


    Beispiel ( für multi row ):

    JavaScript
    1. var _btn = document.querySelectorAll('button');
    2. _btn.forEach( i => {
    3. i.addEventListener('click', function(e) {
    4. _content = this.closest('div').querySelector(':scope .content');
    5. _content.innerHTML = this.dataset.text;
    6. });
    7. });

    Hinweis: Für IE und Edge müssen kleine Anpassungen gemacht werden, die ich hier aufgrund der Übersichtlichkeit und bewusst weggelassen habe!


    Warum auf die Weise?

    Weil ich so mein JavaScript so gut wie nie wieder anpassen muss! Du kannst so viele rows dazu packen, wie Du möchtest, das JavaScript funktioniert automatisch für alle. Vorausgesetzt natürlich, die HTML Auszeichnung ist immer korrekt.


    Warum kein onclick?

    Weil ich damit das Standard Klick-Ereignis des Elements überschreibe, addEventListener() erweitert das Standard Ereignis lediglich. Benötige ich das wirklich nicht, gibt es die Event-Methoden preventDefault() oder stopPropagation(). So kann ich steuern, o ich mich an das Ereignis ranhänge oder wirklich komplett neu schreiben will.