+1 Daumen
1,5k Aufrufe

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 

Avatar von

2 Antworten

+2 Daumen
 
Beste Antwort

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:

2018-02-28 stacklounge html jquery button.gif 

Hoffe, das hilft.

Avatar von
+2 Daumen

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/

Avatar von

Ein anderes Problem?

Stell deine Frage

Ähnliche Fragen

Willkommen bei der Stacklounge! Stell deine Frage einfach und kostenlos

x
Made by a lovely community