Button anklicken, nur Text ändert sich.

[DasPrinzip.]

Liebe Community,

erstmal Entschuldigung für diese Topic-Überschrift. Mir ist aber nichts besseres eingefallen.

Ich habe eine Homepage gemacht. Bei dieser habe ich einen Header mit Logo und Button.
Danach kommt der Mittelteil. Dieser ist jeweils in 2 Hälften aufgeteilt.
Die obere Hälfte beinhaltet einen kleinen Einleitungstext.
Die untere Hälfte hat eine Navigation mit einem Text, der rechts daneben steht. In dieser Navigation will ich einbauen, dass sobald der Button angeklickt wird nur der Text neben der Navigation ändert. Das andere jedoch unverändert bleibt.

Geht sowas? Wenn ja könntet ihr mir das erklären? Ich wusste nicht, nach was ich googlen sollte. Darum frage ich hier

Ich bedanke mich schonmal für hilfreiche Antworten!

Liebe Grüße

DasPrinzip.

[マルコ]

Ja, es geht. Dazu nimmst du JS. Falls du den Text vorher schon weißt musst du ihn nur austauschen, ansonsten kannst du per AJAX ein Request machen und den Text vom Server holen. Ich empfehle jQuery zu benutzen.
Per google "Div Inhalt mit JS ändern" kannst du bestimmt was finden!

ein einfaches Beispiel, wenn du den Text hast (egal woher) mit jQuery:

<div id="MyDIV">alter Text</div><br>
<input type="button" value="ändern" onclick="newText();">

function newText()
{
  // Hol dir den Text von woher auch immer
  var text = "neuer Text";
  // der neue Text ist jetzt in der Variable "text"
  $("#MyDIV").html(text);
}

[dampfhammer96]

minecrawler hat es schon auf den Punkt gebracht.

Du solltest nur erstmal so nach AJAX googlen. Lass jQuery erstmal aus dem Spiel, so verstehst du wohl eher wie es funktioniert, obwohl es komplizierter ist!

Das ist mein Favorit!

MfG Dampfhammer

[マルコ]

Ich persönlich finde jQuery wichtiger als AJAX, weil man es viel öfter braucht und viel vielseitiger einsetzen kann. jQuery kann btw auch AJAX Requests absetzen für dich.
Wobei man für sowas eigentlich in beiden fällen nur ein kurzes Tut durchschaun muss, und es dann so weit verwenden kann.

Naja, für jQuery reicht schon fast diese Beschreibung für die von mir genutzte Funktion aus:

Du schreibst einfach $() und in den Klammern dann einfach eine Art CSS Referenz. Also # für ID, . für Klasse, und ohne alles für einen Tag. Ich nutze dabei gerne IDs,weil die eindeutig sind. Also z.B.

$('#MyDIV')

Das kannst du dann wie ein Objekt benutzen. Also Funktionen damit aufrufen. z.B.:

$("#MyDIV").html();

Und mit der html() Funktion kannst du dir HTML Quelltext zwischen Tags anschauen, also z.B. den HTML Quelltext in einem DIV. und wenn du einen Parameter übergibst, wird der Quelltext in den Wert der übergebenen Variable geändert. Auf der jQuery HP kannst du natürlich die gesamte Liste an Funktionen durchgehen, die du zur Auswahl hast, und daws ganze etwas genauer nachlesen.