JavaScript Wert in Textfeld nach Button Klick eintragen

Pfandfinder

Lieutenant
Registriert
Nov. 2020
Beiträge
619
ich habe so eine Seite:

HTML:
<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.
 
Zuletzt bearbeitet:
Da solltest du zunächst mal deine fehler im HTML bereinigen, da die buttons vielleicht früher mal anker waren...

Javascript:
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
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: Hayda Ministral und 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 ()

netzgestaltung schrieb:
Javascript:
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?

Javascript:
var buttons = document.querySelectorAll('.link'),
 
ja klar kannst du das. die selektoren in querySelectorAll sind wie CSS Selektoren anzuwenden.
 
Zurück
Oben