如何从选择中计算价值？

Question

也许是一个不恰当的问题，但找不到地方问。

问题：我在 html 页面上有 3 个数字（1.5、2.5、-3.5）。 我想用鼠标（双击）选择它们中的每一个，并在剪贴板中获取计算结果（在本例中为 0.5）。

可以吗？

Answer 1

是的，绝对有可能。

当点击数字时，在我的例子中是<button>，它会在点击的按钮上添加selected类，表示选择了数字，或者根据类@的存在将其删除987654324@.

更新类后，它会调用函数calculateSum()，该函数将选择所有类selected的元素，并将innerText（本例中为选中的数字）加在一起。

最后，result 将被传递给函数 renderUpdate() 以可视化更新。

const selectableNumbers = document.querySelectorAll('.numbers')
selectableNumbers.forEach(n => {
  n.addEventListener('dblclick', e => {
    if (n.classList.contains('selected')) {
      n.classList.remove('selected')
    } else {
      n.classList.add('selected')
    }
    calculateSum()
  })
})

function calculateSum() {
  let result = 0
  const selectedNumbers = document.querySelectorAll('.selected')
  selectedNumbers.forEach(n => {
    result += parseFloat(n.innerText)
  })
  renderUpdate(result)
}

function renderUpdate(result) {
  const resultOutput = document.querySelector('.spanResult')
  resultOutput.innerText = `Sum: ${result.toString()}`
}

.selected {
  background-color: grey;
  color: white;
}

<button class="numbers">1.5</button>
<button class="numbers">2.5</button>
<button class="numbers">-3.5</button>
<span class="spanResult">Sum: 0</span>

对于剪贴板：https://stackoverflow.com/a/30810322/16491678

希望这会有所帮助！