在构建一个简单的银行应用程序作为 DOM 操作示例的过程中,我遇到了一个问题,我的非常简单的函数不会更新 HTML 片段,因此更新的值不会显示在屏幕应用程序上。这是我的函数和 HTML 片段。认为没有必要提供 CSS 代码,因为那里的问题没有任何意义。
来自 Java 脚本的代码(实际功能):
const labelSumIn = document.querySelector('.summary__value--in');
const labelSumOut = document.querySelector('.summary__value--out'); //elements defined at the top of code
calcDisplaySummary = function (movements) {
const incomes = movements.filter(mov => mov > 0).reduce((ak, cur) => ak + cur, 0);
labelSumIn.textContent = `${incomes}€`;
const out = movements.filter(mov => mov < 0).reduce((ak, cur) => ak + cur, 0);
labelSumOut.textContent = `${out}€`;
};
calcDisplaySummary([1,-1,2,-3]); //function call`
SUMMARY -->
<div class="summary">
<p class="summary__label">In</p>
<p class="summary__value summary__value--in">0000€</p>
<p class="summary__label">Out</p>
<p class="summary__value summary__value--out">0000€</p>
<p class="summary__label">Interest</p>
<p class="summary__value summary__value--interest">0000€</p>
<button class="btn--sort">↓ SORT</button>
</div>