Joachim: in Textarea strings sammeln, dannach in die Zwischenablage kopieren

Beitrag lesen

Hallo und frohes Neues allerseits.

Ich habe folgendes Problem: auf der Arbeit muss ich zwecks Dokumentation die Namen & LOT-Nummern der verwendeten Matrialien notieren, wobei ich bei unterschiedlichen Aufgaben unterschiedlich viele Materialien benutze (ca. 45 verschiedene Materialien).

Zur Arbeitserleichterung will ich mir eine einfache Webseite machen, die ich mit diversen Buttons, die jeweils für ein Material stehen, versehe. Beim clicken auf ein oder mehrere Buttons soll in einer Textarea alles angezeigt werden - pro Zeile ein Material samt LOT-Nr. Darunter ein Button zum kopieren des gesamten Textes in die Zwischenablage und danach löschen des Inhaltes der Textarea.

Mein Ansatz: jeden Button mit einer id belegen, dann mit einem onclick eine Funktion aufrufen. Die id wird in eine var (string) umgewandelt. Anschließend wird diese var zu einer anderen var (ebenfalls ein string, aber global) hinzugefügt, die nun in die textarea hineinkopiert wird.

Bsp:

  1. Listen-Text hier
  2. click auf Button afa2 -> function -> id = var1 (afa2); varZeig = var1 (afa2) + varVorhanden(); varZeig wird in textarea anzeigt : (afa2)

dannach 2. click auf Button afa3 -> function -> id =var1 (afa3); varZeig = var1 (afa3) + varVorhanden(afa2); VarZeig wird in textarea angezeigt : (afa2 afaf3)

Danach click auf den Kopierbutton, wobei der Text in die Zwischenablage kopiert und das textarea geleert wird.

Wie ihr euch nun denken könnt, habe ich mich erst jetzt in HTML und JS eingelesen und kann fast nichts...

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</br>


<button onclick="document.getElementById('MatLot').value = afa2"> flow 2 </button>
<button onclick="document.getElementById('MatLot').value = afa3"> flow 3 </button>
<button onclick="document.getElementById('MatLot').value = afa35"> flow 3,5 </button>

</br>
<textarea id="MatLot" cols="75" rows="10" placeholder="Verwendete Materialien"></textarea></br>

<input placeholder="Paste here, to try!"></br></br></br>

<p> Testtext Überschrift</p>

<button onclick="myFunction()">Copy text</button>

<script>

var afa2 = "flow a2 lot: 12345 \n";
var afa3 = "flow a3 lot: 23456 \n";
var afa35 = "flow a3,5 lot: 34567 \n";

function myFunction() {
  var copyText = document.getElementById("MatLot");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  //alert("Copied the text: " + copyText.value);
}
</script>

</br>
</body>
</html>
Quelltext hier

Könnte mir jemand bitte helfen?