Wie Text ändern?

Zitat

Bekomme das leider nicht hin, 'content' entsprechende IDs zu geben

Das ist gar nicht nötig, weil #content ja das Ziel ist, wohin die Texte sollen und das ist immer das selbe. Wenn der Text jeweils im value-Attribut steht, wie in deinem Code, ist es ganz einfach:

<script type="text/javascript">
function changeContent(txt){
    document.getElementById('content').innerHTML = txt;
}
</script>
<div id="content">Das ist der aktuelle Text....</div>
<input type="button" value="alternativer Text 1" onclick="changeContent(this.value);"/>
<input type="button" value="alternativer Text 2" onclick="changeContent(this.value);"/>
<input type="button" value="alternativer Text 3" onclick="changeContent(this.value);"/>

Wenn die Text etwas länger werden sollten, ist es eher zu empfehlen, sie in Variablen zu definieren und diese als Parameter an changeContent() zu übergeben.

1. Du solltest bei dem Aufruf der Funktion mit dem 'onclick' einen Parameter übergeben (1 . 2 oder 3) - zB onclick="changeContent(1);"

2. In der JavaScript Funktion 'changeContent' müssen dann die unterschiedlichen Texte als Variable definiert werden.

3. Mit dem beim Funktionaufruf übergebenen Parameter, kann dann zB mit einer 'Case' Abfrage jeweils der richtige Text eingefügt werden - https://www.w3schools.com/js/js_switch.asp

Ich würde ja auch onclick verzichten und die Logik komplett in JS auslagern. Die Texte ( je nach Länge und produktiver Verwendung ) kann ich auch an den dataset der Schaltflächen setzen und direkt drauf zugreifen.

Beispiel ( für multi row ):

<div class="row">
  <div class="content">default</div>
  <button data-text="new text #1">Change #1</button>
  <button data-text="new text #2">Change #2</button>
  <button data-text="new text #3">Change #3</button>
</div>
<div class="row">
  <div class="content">default</div>
  <button data-text="new text #1">Change #1</button>
  <button data-text="new text #2">Change #2</button>
  <button data-text="new text #3">Change #3</button>
</div>

var _btn = document.querySelectorAll('button');

_btn.forEach( i => {
  i.addEventListener('click', function(e) {
    _content = this.closest('div').querySelector(':scope .content');
    _content.innerHTML = this.dataset.text;
  });
});

Hinweis: Für IE und Edge müssen kleine Anpassungen gemacht werden, die ich hier aufgrund der Übersichtlichkeit und bewusst weggelassen habe!

Warum auf die Weise?

Weil ich so mein JavaScript so gut wie nie wieder anpassen muss! Du kannst so viele rows dazu packen, wie Du möchtest, das JavaScript funktioniert automatisch für alle. Vorausgesetzt natürlich, die HTML Auszeichnung ist immer korrekt.

Warum kein onclick?

Weil ich damit das Standard Klick-Ereignis des Elements überschreibe, addEventListener() erweitert das Standard Ereignis lediglich. Benötige ich das wirklich nicht, gibt es die Event-Methoden preventDefault() oder stopPropagation(). So kann ich steuern, o ich mich an das Ereignis ranhänge oder wirklich komplett neu schreiben will.