JavaScript Wert in Textfeld nach Button Klick eintragen

[Pfandfinder]

ich habe so eine Seite:

<li class="items">
    <p>some text 1</p>
    <div><button class="link" value="1">Wählen</a></div>
</li>
<li class="items">
    <p>some text 2</p>
    <div><button class="link" value="2">Wählen</a></div>
</li>
<li class="items">
    <p>some text 3</p>
    <div><button class="link" value="3">Wählen</a></div>
</li>



<form action="send" method="POST">
    <input type="text" name="text" id="text" required>
    <input type="number" name="zahl" id="zahl">
    <button type="submit" name="submit">Senden</button>
</form>

oben sind mehrere Texte mit je einem Button zum Auswählen. Unten ist dann ein Formular und man kann selbst die Zahl des Textes dort eintragen. Jetzt will ich aber auch dass man einfach auf den jeweiligen Button klickt und dann die Zahl (das value des Buttons) in das textfeld "number" eingetragen wird. Wie kann ich das mit javascript machen ? außerdem sollte der cursor direkt in das textfeld "text" gehen.

 

[abcddcba]

Hast du schon versucht mal zu suchen nach HTML Button click event?

 

[netzgestaltung]

Da solltest du zunächst mal deine fehler im HTML bereinigen, da die buttons vielleicht früher mal anker waren...

Spoiler: lösung

var buttons = document.querySelectorAll('button'),
    input = document.getElementById('zahl');

buttons.forEach(function(button){
  button.addEventListener('click', function(event){
    input.value = button.value;
    event.preventDefault();
  });
});

Referenzen:
https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll
https://stackoverflow.com/questions/12362256/addeventlistener-on-nodelist

 

[Pfandfinder]

ja also das hier wäre es ja fast: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onclick3

aber ich habe ja mehrere Buttons, nicht nur einen.

Ergänzung (10. Juli 2021)

var buttons = document.querySelectorAll('button'),
    input = document.getElementById('zahl');

buttons.forEach(function(button){
  button.addEventListener('click', function(event){
    input.value = button.value;
    event.preventDefault();
  });
});

Referenzen:
https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll
https://stackoverflow.com/questions/12362256/addeventlistener-on-nodelist

Danke! kann man noch hinzufügen, dass nur die Buttons vom li-Bereich zählen ? sonst werden ja alle anderen buttons auch verwendet. vielleicht mit der klasse "link" ? das geht einfach so oder?

var buttons = document.querySelectorAll('.link'),

 

[netzgestaltung]

ja klar kannst du das. die selektoren in querySelectorAll sind wie CSS Selektoren anzuwenden.