Изменение переменной из функции?

Question

[Маргарита Гаврилова]

не могу понять, почему переменные place, link, power изменяются, а sum нет, может поскажите, как оптимизировать код, код для калькулятора

const selectPlace = document.querySelectorAll('.place div'),
  selectLink = document.querySelectorAll('.link div'),
  selectPower = document.querySelectorAll('.power div')

let place = '',
  link = '',
  power = ''

let sum = `${place} + ${link} + ${power}`

function selectionActive(e) {
  selectPlace.forEach(r => {
    r.classList.remove('value-active')
  })
  selectPlace.forEach(item => {
    if (item === e.target) {
      item.classList.add('value-active')
      place = item.textContent
    }
  })
}

function selectionActive2(e) {
  selectLink.forEach(r => {
    r.classList.remove('value-active')
  })
  selectLink.forEach(item => {
    if (item === e.target) {
      item.classList.add('value-active')
      link = item.textContent
    }
  })
}

function selectionActive3(e) {
  selectPower.forEach(r => {
    r.classList.remove('value-active')
  })
  selectPower.forEach(item => {
    if (item === e.target) {
      item.classList.add('value-active')
      power = item.textContent
      console.log(power, sum)
    }
  })
}

selectPlace.forEach(e => {
  e.addEventListener('click', selectionActive)
})
selectLink.forEach(e => {
  e.addEventListener('click', selectionActive2)
})
selectPower.forEach(e => {
  e.addEventListener('click', selectionActive3)
})

Answer 1

[WapSter]

Потому, что в коде, на момент исполнения выражения в sum let place = '', link = '', power = '' уже имеют значения, меняют их они уже гораздо позже.

Answer 2

[Steppp]

Попробуй так!

const selectPlace = document.querySelectorAll('.place div'),
  selectLink = document.querySelectorAll('.link div'),
  selectPower = document.querySelectorAll('.power div')

let place = '',
  link = '',
  power = ''
  let sum = 0;


function selectionActive(e) {
  console.log(this);
  this.select.forEach(r => {
    r.classList.remove('value-active')
  })
  this.select.forEach(item => {
    if (item === e.target) {
      item.classList.add('value-active')
      place = item.textContent
    }
  })
  sum = `${place} + ${link} + ${power}`;
  console.log(sum);
}

selectPlace.forEach(e => {
  e.addEventListener('click', {handleEvent: selectionActive, e, select:selectPlace})
})
selectLink.forEach(e => {
  e.addEventListener('click', {handleEvent: selectionActive, e, select:selectLink})
})
selectPower.forEach(e => {
  e.addEventListener('click', {handleEvent: selectionActive, e, select:selectPower})
})