Ankündigung

Einklappen
Keine Ankündigung bisher.

Button Text bei klick ändern

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

  • Button Text bei klick ändern

    Hallo liebe Community,

    ich komme momentan nicht weiter, da ich leider nur sehr beschränkte JS-Kenntnisse habe hier die Frage:

    "<div class="link_spoiler shadow" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('sp oiler2') .style.display='none'}"><i class=""></i>Rezept anzeigen</div></div>"
    Das ist mein Code. Durch einen klick sollte sich das "Rezept anzeigen" durch "Rezept ausblenden" ersetzen. Natürlich auch wieder andersrum. Habe es mit etlichen Sachen aus dem Netz versucht doch entweder hatten die immer einen Button mit dem sie den Text angesprochen haben oder was anderes.
    Der Spoiler sollte natürlich danach noch funktionieren.

    Vielen Dank im voraus!

    Viele Grüße
    Chris
    Zuletzt geändert von Chris; 23.05.2019, 10:56.

  • #2
    Hi Chris, ich hab für dich ein Beispiel erstellt:
    HTML-Code:
    <!DOCTYPE HTML>
    <html lang="de">
      <head>
      <title>Test</title>
      <meta charset="utf-8">
        <style>
          #receptContent {
            display: none;
          }
        </style>
        <script>
          document.addEventListener("DOMContentLoaded", function() {
            var receptStatus = "unsichtbar";
            var receptButton = document.querySelector('#receptButton');
            var recpetContent = document.querySelector("#receptContent");
            receptButton.addEventListener("click", function() {
                if(receptStatus == "unsichtbar") {
                    receptStatus = "sichtbar";
                    receptButton.value = "Rezept verbergen";
                    receptContent.style.display = "block";
                } else {
                    receptStatus = "unsichtbar";
                    receptButton.value = "Rezept zeigen";
                    receptContent.style.display = "none";
                }
            });
          });
        </script>
      </head>
      <body>
        <h1>Rezept</h1>
        <input type="button" id="receptButton" value="Rezept zeigen">    
        <div id="receptContent">
          <h2>Rezept</h2>
          <p>Lorem ipsum, ezept...</p>
        </div>
      </body>
    </html>
    Ich hoffe es hilft dir. Wenn du weitere Fragen hast einfach hier in den Thread schreiben.

    Gruss Localfu
    Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
    Albert Einstein

    Kommentar


    • #3
      Hallo Localfu,

      vielen dank! Da ich aber einen Spoiler habe und somit keinen Button deklariert habe wird das Script wahrscheinlich nicht funktionieren oder? Wie funktioniert es mit dem Code: <div class="link_spoiler shadow" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('sp oiler2') .style.display='none'}"><i class=""></i>Rezept anzeigen</div>

      Eine ID könnte ich ja ohne probleme vergeben aber die "Value" wird schwer, da der Spoiler sonst nicht mehr aufgeht.

      Wärst mir eine riesen hilfe. Weiß momentan nicht mehr weiter...

      Liebe Grüße Chris

      Kommentar


      • #4
        Ich empfehle dir kein Inline-JavaScript anzuwenden. Besser wäre es in einem Script-Element-Absatz innerhalb von <head></head> zu schreiben.

        Hier die veränderte Version:
        HTML-Code:
        <!DOCTYPE HTML>
        <html lang="de">
          <head>
          <title>Test</title>
          <meta charset="utf-8">
            <style>
              #receptContent {
                display: none;
              }
            </style>
            <script>
              document.addEventListener("DOMContentLoaded", function() {
                var receptStatus = "unsichtbar";
                var receptButton = document.querySelector('.link_spoiler');
                var recpetContent = document.querySelector("#receptContent");
                receptButton.addEventListener("click", function() {
                    if(receptStatus == "unsichtbar") {
                        receptStatus = "sichtbar";
                        receptButton.innerHTML = '<i></i>Rezept verbergen';
                        receptContent.style.display = "block";
                    } else {
                        receptStatus = "unsichtbar";
                        receptButton.innerHTML = '<i></i>Rezept zeigen';
                        receptContent.style.display = "none";
                    }
                });
              });
            </script>
          </head>
          <body>
            <h1>Rezept</h1>
            <div class="link_spoiler shadow"><i></i>Rezept anzeigen</div>
            <div id="receptContent">
              <h2>Rezept</h2>
              <p>Lorem ipsum, ezept...</p>
            </div>
          </body>
        </html>
        Gruss Localfu
        Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
        Albert Einstein

        Kommentar


        • #5
          Hat geklappt! Vielen Dank!

          Wieso empfiehlst du mir dieses nicht?
          Naja ich bin momentan froh das es klappt Mit Java stehe ich irgendwie auf Kriegsfuß. Habe gerade versucht ScrollMacig einzubauen aber selbst das hat nicht funktioniert

          Schönen Abend noch und nochmals vielen Dank!

          Kommentar


          • #6
            Hi Chris,
            zwar gibt es die Möglichkeit Inlineskripte zu nutzen, aber performancetechnisch als auch die Übersicht gehen dabei drauf. JavaScript ist auch kein Java und sollte man nicht verwechseln. Zwar haben Java und Javascript eine sehr ähnliche Syntax und Anfangs gab es von Netscape tatsächlich eine Zusammenarbeit, aber es sind trotzdem zwei unterschiedliche Sprachen und Technologien.

            Guss Localfu
            Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
            Albert Einstein

            Kommentar

            homepage-forum.de - Hilfe für Webmaster! Statistiken

            Einklappen

            Themen: 56.457   Beiträge: 428.476   Mitglieder: 27.874   Aktive Mitglieder: 61
            Willkommen an unser neuestes Mitglied, solobest.

            Online-Benutzer

            Einklappen

            746 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 743.

            Mit 2.057 Benutzern waren am 14.07.2019 um 11:45 die meisten Benutzer gleichzeitig online.

            SimpleSite

            Die neuesten Beiträge

            Einklappen

            • bueny3897
              Bestehende Webseite bearbeiten
              Ein Freund von mir führt ein kleines Unternehmen, nun hat er schon eine bestehende Webseite die ich bearbeiten soll. Ich würde gerne wissen wie ich diese bearbeiten kann.
              Servertyp: FTP
              09.07.2019, 13:16
            • bcounsultgroup
              Antwort auf Bestehende Webseite bearbeiten
              Wenn Sie Wordpress verwenden möchten, können Sie direkt über den Browser auf die Website zugreifen. Fügen Sie einfach /wp-admin am Ende der URL hinzu. Sie benötigen dann Anmeldeinformationen, um sich anzumelden....
              15.07.2019, 13:44
            • arnego2
              Antwort auf SEO selbst machen oder mit Linkaufbau-Agentur?
              Man sollte diesen Faden zumachen und alle Sperren die hier ihre Links losgeworden sind. IMHO
              13.07.2019, 22:50
            • arnego2
              Antwort auf Bestehende Webseite bearbeiten
              Der Besitzer sollte für dich die WordPress Installation vornehmen und dir den WP-Admin Zugang geben. Damit machst du dann deine Worpress Seite. Standartthemen gibt es ja genug. Ein Geschäft würde ich allerdings nicht auf einem Standart Theme aufzubauen....
              13.07.2019, 22:49
            • Zando87
              Antwort auf SEO selbst machen oder mit Linkaufbau-Agentur?
              Ich bin da ganz deiner Meinung dass es heutzutage so viele SEO Agenturen gibt dass man dort einfach den Überblick verlieren kann. Dennoch muss man sagen dass man heutzutage ohne SEO keine richtige Arbeit mehr leisten kann. Ich habe an Anfang selber versucht SEO für meine Website zu machen musste es...
              13.07.2019, 21:49
            • Andre1
              Neue Seite ist fertig
              Hallo an alle,

              es hat etwas länger gedauert, als ich gedacht hatte.
              Aber nun sind meine Seiten online.
              Mehrere Demoseiten und meine Hauptseite.

              Was haltet ihr davon, wo sollte ich noch Veränderungen vornehmen?

              https://www.co-webdesign.de

              ...
              12.07.2019, 16:18
            • Andre1
              Antwort auf Neue Seite ist fertig
              Hallo,

              ich kann das ändern und werde das auch gleichmachen.
              PHP-Versionen 7.1.29, 7.2.18, 7.3.5

              Liebe Grüße
              Andre...
              13.07.2019, 21:43
            • daniel5959
              Antwort auf Neue Seite ist fertig
              Hallo,



              Bei Strato z.B. kostet die Unterstützung der alten PHP-Version etwa 5 Euro pro Monat, da die PHP-Community den Support für diese alten PHP-Versionen eingestellt hat und dies jetzt Strato gegen einen monatlichen Betrag übernimmt.

              Aber wer übernimmt beim...
              13.07.2019, 21:24
            • Andre1
              Antwort auf Neue Seite ist fertig
              Hallo,

              die Datenschutzerklärung habe ich überarbeitet, ebenso das Widerrufsrecht.
              Das Widerrufsrecht hat und jetzt auch wieder alle Verträge berücksichtigt.

              Die Preise bei Hostigangeboten sind im Moment nicht befristet.
              Sie gelten erst einmal auf Dauer.
              ...
              13.07.2019, 20:33
            • daniel5959
              Antwort auf Bestehende Webseite bearbeiten
              Hallo,

              der Besitzer könnte ja die Datenbank selber anlegen, dann muss er keine Webhosting-Logindaten herausgeben, und nur die erforderlichen Daten für die Wordpress-Installation nennen, da wären ...
              1. Datenbank-Name = ...............?
              2. Datenbank-Nutzername = ...........?
              3. Datenbank-Passwort
              ...
              13.07.2019, 20:16
            Lädt...
            X