Wie mache ich mit HTML einen Button mit anschließend erscheinenden Text?

Question

Ich weiß wie man bei HTML eine Button erstellt. 

<button>Knopf1</button>
<button>Knopf2</button>

Wie mache ich es,  wenn ich Knopf 1 drücke, dass dann darunter ein Text erscheint der "Knopf 1 danke" heißt und bei Knopf 2 "Knopf 2 danke"? 

Danke im voraus 

Answer 1

Dafür benutzt man JavaScript bzw. Jquery. Außerdem macht es Sinn, jedem Button eine id zu geben. Außerdem sollten wir ein p Element haben, damit man den Text einsetzen kann.

HTML:

<button id="button1">Knopf1</button>

<button id="button2">Knopf2</button>

<p id="yourtext"></p>

Javascript bzw. Jquery:

$(document).ready(function()
{
 $('#button1').click(function()
 {
    $('#yourtext').text('Knopf1 danke');
 });
  
 $('#button2').click(function()
 {
    $('#yourtext').text('Knopf2 danke');
 });
  
});

Ausprobieren: https://jsfiddle.net/kai_noack/7Lwo6xo9/4/

Screencast:

 

Hoffe, das hilft.

Answer 2

Eine weitere Möglichkeit (unter Verwendung von JavaScript) besteht darin, auf das Attribut innerHTML eines DIV-Containers zuzugreifen. Definiere Dir dazu unterhalb der beiden Buttons einen DIV-Container mit einer id:

<div id="output"></div>

Nun benötigst Du eine JavaScript-Funktion, mit der die Textmodifikation durchgeführt wird. Diese holt sich das DIV-Output-Objekt und ändert das Attribut innerHTML:

function show_text(text){
 var output = document.getElementById("output");
  output.innerHTML = text;
}

Diese Funktion muss in den beiden Buttons in onclick aufgerufen werden. Dabei wird der buttonspezifische Text als Parameter übergeben.

<button onclick="show_text('Knopf 1 danke')">Knopf1</button>
<button onclick="show_text('Knopf 2 danke')">Knopf2</button>

Hier ist das JSFiddle dazu: https://jsfiddle.net/ncpwm1sb/4/