Как при клике на один элемент увеличить значение в другом?

Question

[Павел]

<div class="dog">
  <div class="score">
    Очков: <span class="score_counter">0</span>
  </div>
  <i class="fas fa-10x fa-dog"></i>
</div>

var score = $(".score_counter").text();
$(document).ready(function(){
  $("i.fa-dog").on("click", function() {
    score+=1;
  })
});

Пытаюсь создать игру кликер и нужно сделать так, чтобы при клике на <i class="fas fa-10x fa-dog"></i>
значение в span увеличивалось на 1.
Не могу понять, что отвечает за значение span'a.

Answer 1

[0xD34F]

const containerSelector = '.dog';
const buttonSelector = 'i.fa-dog';
const counterSelector = '.score_counter';

Если пара кнопка-счётчик представлена в единственном экземпляре:

$(buttonSelector).click(() => {
  $(counterSelector).text((i, val) => +val + 1);
});

// или

document.querySelector(buttonSelector).addEventListener('click', () => {
  document.querySelector(counterSelector).textContent -= -1;
});

Если элементов .dog несколько:

$(containerSelector).on('click', buttonSelector, e => {
  $(counterSelector, e.delegateTarget).text((i, val) => -~val);
});

// или

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, ({ currentTarget: t }) => t
  .closest(containerSelector)
  .querySelector(counterSelector)
  .innerText++
);