Button zum Ausblenden

Question

Guten Morgen,
Ich suche nach einer Funktion um mit einem Button einen Text einzublenden. Das stelle ich mir in etwa wie folgt vor:

Man trägt in ein freies Text Feld einen Wert ein und kann dann auf einen Button "submit" klicken. Dieser blendet dann neuen Text ein. Quasi soll nach dem Klick auf dem Button neuer Text erscheinen

Gibt es eine solche Funktion?

Answer 1

Mir ist die Beziehung zwischen dem erscheinenden Text und dem einzugebenden Text nicht ganz klar. Haben diese etwas miteinander zu tun?

Falls nicht, können Sie recht einfach mit JS einen beliebigen Text einblenden (per click auf einen Button). Ein Beispiel sehen Sie hier (das ganze Script kann so in ein html Feld kopiert werden, und müsste dann nur noch angepasst werden):

 <script>
function displaySong1() {
  var p = document.getElementById("paragraph");
  p.style.display = "block";  	 
}
</script>


    <button type="button" onclick="displaySong1()">Easy</button>
    <div id="paragraph" style="display:none";>
    hello
    </div>

Comments

Danke für die schnelle Antwort.
Die Texte stehen nicht in Beziehung. Es soll eigentlich nur durch den Klick auf den Button der neue Text erscheinen. Ich probiere es mal aus, danke.

---

Wenn ich den Button so anwende, springt der Fragebogen leider eine Seite weiter, da er glaube ich das "next Page" Event ausführt. Fällt Ihnen da noch eine Lösung ein?

---

Sie haben recht, habe ich gerade auch gemerkt. Ich vermute, das es sich irgendwie mit SoSci aufreibt. Ich probiere mal noch aus, ob es etwas herausfinde. Aber ggf. schreibt der Admin währenddessen noch.

---

Habe den Fehler gefunden: Der Button braucht einen type ="button"
dann sollte es funktionieren:
<button  type ="button" class="button button1" onclick="displaySong1()">Easy</button>

edit: Ich habe Ihnen den Code oben nochmal etwas aufgeräumt, damit es lesbarer ist.

---

Perfekt, das hat geklappt! Vielen Dank :)
Wie würde ich das machen, wenn bei dem Klick auf dem Button der Text "easy" sowie ein neuer Button auftauchen soll, welcher wieder Text offenbart?
Also: Erst der Button "submit" welcher den Text (hier in dem Fall "easy") sowie einen neuen Button "receive" einblendet. Dann soll man auf den Button "receive" klicken können und es öffnet sich wieder ein Text. Gibt es da eine Lösung?

---

Sorry, das ist doch eine größere Änderung die ich mit meinem bescheidenen Wissen nicht so schnell verwirklichen kann. Ich würde eine neue Frage öffnen mit den zwei Buttons (und ggf. wozu sie das brauchen). Dann wird ihnen sicher ein Admin bald helfen.

---

Alles klar :) Trotzdem vielen Dank! Sie haben mir super viel weitergeholfen.