javascript - 寻找更有效的方法来计算两个输入字段的值

Question

我有两个输入字段，当它们的内容发生变化时，它们都会触发一个函数。

document.getElementsByName("playerOut")[0].addEventListener('change', swapPlayerOut);
document.getElementsByName("playerIn")[0].addEventListener('change', swapPlayerIn);

这两个函数中的每一个都根据输入动态更新 innerHTML 内容。

// Swaps out the player being sold
function swapPlayerOut() {
  var om = document.getElementsByClassName("outMil")[0];
  var result = entries.find(player => player.gsx$playerfullname.$t === this.value);
  om.innerHTML = result.gsx$value.$t;
  a = result.gsx$value.$t;
};

// Swaps in the player being bought
function swapPlayerIn() {
  var im = document.getElementsByClassName("inMil")[0];
  var result = entries.find(player => player.gsx$playerfullname.$t === this.value);
  im.innerHTML = result.gsx$value.$t;
  b = result.gsx$value.$t;
};

和 HTML：

<div class="grid-container-transfers">
  <div class="outMil"></div>
  <div class="inMil"></div>
  <div class="PandL"></div>
</div>

我需要更新第三个 HTML 元素<div class="PandL">，计算a并b在其本地函数之外传递。

我已经让它与另外两个事件侦听器一起工作：

document.getElementsByName("playerOut")[0].addEventListener('change', pl);
document.getElementsByName("playerIn")[0].addEventListener('change', pl2);

调用另外两个函数：

function pl () {
    var pandl = document.getElementsByClassName("PandL")[0];
    pandl.innerHTML = -a;
    }

function pl2 () {
    var pandl = document.getElementsByClassName("PandL")[0];
    var round = a-b;
    pandl.innerHTML = round.toFixed(1);
        }

但这感觉非常低效且不稳定，所以我想知道是否有人知道实现a-b.

我对 js 还是很陌生，我敢肯定这是 101 的东西，但如果有人知道如何做到这一点，我将不胜感激。干杯!

标签： javascripthtml