Как соединить кнопку в html и элемент объекта?

Question

[Евгений Ромашов]

У меня есть объект, такого вида:

let players = {
  player1: {
    attack: 5,
    defense: 3,
    speed: 5,
    control: 5,
    strike: 5,
    stateOnSat: false
  },
  player2: {
    attack: 3,
    defense: 5,
    speed: 4,
    control: 4,
    strike: 5,
    stateOnSat: false
  },

И так далее, вплоть до большего кол-ва игроков. Так же у меня есть такой код в html:

<li>
          player1
          <button class="fas fa-plus-square btn btn-plus"></button>
          <button class="fas fa-check-square btn btn-check"></button>
          <button class="fas fa-minus-square btn btn-delete"></button>
        </li>
        <li>
          player2
          <button class="fas fa-plus-square btn btn-plus"></button>
          <button class="fas fa-check-square btn btn-check"></button>
          <button class="fas fa-minus-square btn btn-delete"></button>
        </li>

Мне нужно, чтобы при нажатии на кнопку btnPlus (const btnPlus = document.querySelectorAll('.btn-plus');) - статус игрока (stateOnSat) менялся на true. Причем, чтобы менялся статус того игрока, которого мы выбрали нажатием кнопки btnPlus.

Как это сделать?

Answer 1

[Banan44]

const players = {
    player1: {
      attack: 5,
      defense: 3,
      speed: 5,
      control: 5,
      strike: 5,
      stateOnSat: false
    },
    player2: {
      attack: 3,
      defense: 5,
      speed: 4,
      control: 4,
      strike: 5,
      stateOnSat: false
    }
  }

  const btnPlus = document.querySelectorAll('.btn-plus')

  btnPlus[0].onclick = () => {
    players.player1.stateOnSat = true
    alert(players.player1.stateOnSat) // true
  }

  // Или 
  btnPlus[1].addEventListener('click', () => {
    players.player2.stateOnSat = true
  })

Или

<button class="fas fa-plus-square btn btn-plus" onclick="players.player2.stateOnSat = true">Plus</button>

Comments

[Евгений Ромашов]

Banan44, спасибо!

А чтобы не писать для всех 30 игроков это, наверно, есть вариант с циклом, я просто не пойму как там его использовать эту переборку. Нужно this или target, как это будет примерно выглядеть?

[Banan44]

Евгений Ромашов, ну например вот так:

<div>
   <p>player1</p>
   <button class="fas fa-plus-square btn btn-plus" onclick="plusState(this)">Plus</button>
   <button class="fas fa-check-square btn btn-check">Check</button>
   <button class="fas fa-minus-square btn btn-delete">Delete</button>
</div>

<script>
function plusState(element){
    const player = element.parentElement.querySelector('p').innerText // player1
    players[player].stateOnSat = true
}
</script>

[Евгений Ромашов]

Да, спасибо!

Буду пробовать, вначале ещё сам попробую одну задумку, а если не получится, тогда сделаю так.