现在我们想实现用户之间相互转账的功能；
● 和之前一样我们还是要通过这个点击，页面元素一再写在变量里面了
在这里插入图片描述
javascript">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，当前转帐房的余额是否大于用户输入值，用户输入的账户名是否存在，等等
javascript">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 &¤tAccount.balance >= amount &&receiverAcc?.username !== currentAccount.username) {console.log('Transfer valid');}
});
注：我们之前的余额代码是这样写的
javascript">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条件的判断结果。所以我们要想去知道这个人的余额，但是代码中并没有地方去存储他，所有我们要稍微修改一下这个代码
javascript">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的作用域包含了整个函数外部；这样我们也不需要单独找个地方来存放用户的余额；
这个代码修改之后，在上一节用户登录的时候调用用户的余额，传参数的话只需要穿用户账号就可以了
● 下一步就是将转账人减少金额，收款人增加金额
javascript">if (amount > 0 &&receiverAcc &¤tAccount.balance >= amount &&receiverAcc?.username !== currentAccount.username) {currentAccount.balance.push(-amount);receiverAcc.balance.push(amount);}
然后就是继续更新UI,但是我们不可能复制上述代码，我们还是将更新UI的代码进行重构
javascript">const updateUI = function (acc) {displayMovements(acc.movements);calcDisplayBalance(acc);calcDisplaySummary(acc);
};
● 然后直接调用
javascript"> if (amount > 0 &&receiverAcc &¤tAccount.balance >= amount &&receiverAcc?.username !== currentAccount.username) {currentAccount.movements.push(-amount);receiverAcc.movements.push(amount);updateUI();}
● 和之前一样，我们在确认转账之后清空一下用户名和密码的输入
javascript"> inputTransferAmount.value = inputTransferTo.value = '';
这样我们转账的功能就完成了，一下是实现的全部代码；
javascript">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 &¤tAccount.balance >= amount &&receiverAcc?.username !== currentAccount.username) {currentAccount.movements.push(-amount);receiverAcc.movements.push(amount);updateUI(currentAccount);}
});
