多个按钮、多个 ID 和不同的操作

Question

I am beginner in Javascript and I don't know what is the easiest way to work this out without writing hundreds of row. It is working, but an awkward solution. Its for an analysis. I have 200 buttons and they store different data, but the same type(string) and they have different IDs and do different action. They do the action for click event. How should I store the data? I was thinking about JSON and using GET request, but not sure about that. Can I do it without writing buttons in HTML? Because I have random text written between the buttons. Thank you for your help.

HTML:

`    
<button id="move47" class="color-border">20.Kh1</button>
<button id="move48" class="color-border">Rf7</button>
<button id="move49" class="color-border">21.Qa4</button>
<button id="move50" class="color-border">g4</button>
<button id="move51" class="color-border">22.Qxa7</button>
<button id="move52" class="color-border">Ra8</button>
`

Javascript:

`$('#move47').on('click', function () { 
board.position('rnbqkbnr/pppppppp/8/8/3P4/8/PPP1PPPP/RNBQKBNR b KQkq d3 0 
1')})
$('#move48').on('click', function () {
board.position('rnbqkb1r/pppppppp/5n2/8/3P4/8/PPP1PPPP/RNBQKBNR w KQkq - 1 
2')})
$('#move49').on('click', function () {
board.position('rnbqkb1r/pppppppp/5n2/8/2PP4/8/PP2PPPP/RNBQKBNR b KQkq c3 0 
2')})
$('#move50').on('click', function () {
board.position('rnbqkb1r/pppppp1p/5np1/8/2PP4/8/PP2PPPP/RNBQKBNR w KQkq - 0 
3')})
$('#move51').on('click', function () {
board.position('rnbqkb1r/pppppp1p/5np1/8/2PP4/2N5/PP2PPPP/R1BQKBNR b KQkq - 1 
3')})
$('#move52').on('click', function () {
board.position('rnbqk2r/ppppppbp/5np1/8/2PP4/2N5/PP2PPPP/R1BQKBNR w KQkq - 2 
4')})
`

Answer 1

You should use javascript to create these elements using document object of browser. There, you can generate Ids and add event listeners. From the event, you can retrieve id and write your actions accordingly.

check out how to use this in JQuery. I am suggesting in Vanilla.

document.createElement('button')
document.querySelectorAll('#move').addEventListener('click', (event) => {})