（五）小案例银行家应用程序-实现转账

现在我们想实现用户之间相互转账的功能；

● 和之前一样我们还是要通过这个点击，页面元素一再写在变量里面了
在这里插入图片描述

btnTransfer.addEventListener('click', function (e) {
  e.preventDefault();
  const amount = Number(inputTransferAmount.value);
  const receiverAcc = accounts.find(
    acc => acc.username === inputTransferTo.value
  );

  console.log(amount, receiverAcc);
});

● 我们获取到用户输入钱的值和收款方之后，我们还要去判断用户输入值是否大于0，当前转帐房的余额是否大于用户输入值，用户输入的账户名是否存在，等等

btnTransfer.addEventListener('click', function (e) {
  e.preventDefault();
  const amount = Number(inputTransferAmount.value);
  const receiverAcc = accounts.find(
    acc => acc.username === inputTransferTo.value
  );

  console.log(amount, receiverAcc);

  if (
    amount > 0 &&
    receiverAcc &&
    currentAccount.balance >= amount &&
    receiverAcc?.username !== currentAccount.username
  ) {
    console.log('Transfer valid');
  }
});

注：我们之前的余额代码是这样写的

const calcDisplayBalance = function (movements) {
  const balance = movements.reduce((acc, mov) => acc + mov, 0);
  labelBalance.textContent = `${balance} EUR`;
};

这样的话我们无法访问到余额，因为balance是在calcDisplayBalance函数内部声明的局部变量，它只在函数内部可见，外部无法访问。因此，在btnTransfer的事件监听器中，无法访问到balance，导致条件判断中的currentAccount.balance始终为undefined，从而影响了if条件的判断结果。所以我们要想去知道这个人的余额，但是代码中并没有地方去存储他，所有我们要稍微修改一下这个代码

const calcDisplayBalance = function (acc) {
  acc.balance = acc.movements.reduce((acc, mov) => acc + mov, 0);
  labelBalance.textContent = `${acc.balance}€`;
};

修改后的代码balance是赋值给了账户对象(acc)的balance属性，而acc是calcDisplayBalance函数的参数，在函数外部定义的。这样一来，balance变量的作用域就延伸到了函数外部，可以在后续的代码中访问到。因为balance的作用域包含了整个函数外部；这样我们也不需要单独找个地方来存放用户的余额；
这个代码修改之后，在上一节用户登录的时候调用用户的余额，传参数的话只需要穿用户账号就可以了

● 下一步就是将转账人减少金额，收款人增加金额

if (
    amount > 0 &&
    receiverAcc &&
    currentAccount.balance >= amount &&
    receiverAcc?.username !== currentAccount.username
  ) {
    currentAccount.balance.push(-amount);
    receiverAcc.balance.push(amount);
  }

然后就是继续更新UI,但是我们不可能复制上述代码，我们还是将更新UI的代码进行重构

const updateUI = function (acc) {
  displayMovements(acc.movements);
  calcDisplayBalance(acc);
  calcDisplaySummary(acc);
};

● 然后直接调用

  if (
    amount > 0 &&
    receiverAcc &&
    currentAccount.balance >= amount &&
    receiverAcc?.username !== currentAccount.username
  ) {
  currentAccount.movements.push(-amount);
    receiverAcc.movements.push(amount);
    updateUI();
  }

● 和之前一样，我们在确认转账之后清空一下用户名和密码的输入

 inputTransferAmount.value = inputTransferTo.value = '';

这样我们转账的功能就完成了，一下是实现的全部代码；

btnTransfer.addEventListener('click', function (e) {
  e.preventDefault();
  const amount = Number(inputTransferAmount.value);
  const receiverAcc = accounts.find(
    acc => acc.username === inputTransferTo.value
  );

  inputTransferAmount.value = inputTransferTo.value = '';
  if (
    amount > 0 &&
    receiverAcc &&
    currentAccount.balance >= amount &&
    receiverAcc?.username !== currentAccount.username
  ) {
    currentAccount.movements.push(-amount);
    receiverAcc.movements.push(amount);
    updateUI(currentAccount);
  }
});