+1 Punkt
61 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 

Gefragt 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:

Screencast:

2018-02-28 stacklounge html jquery button.gif 

Hoffe, das hilft.

Beantwortet von  –  ❤ Bedanken per Paypal
+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: 


Beantwortet von 7,6 k

Ein anderes Problem?

Stell deine Frage

Ähnliche Fragen

Willkommen bei der Stacklounge! Stell deine Frage sofort und kostenfrei

x
Made by a lovely community
...