Question 46220 in Html Question posted in
Some basic documentation can be found here.

Function not displaying and updating DOM element as it supposed to do – Html

Following a course while building an simple banking app as an example of DOM manipulation, I encountered a problem where my very simple function wont update HTML snippet so there fore the updated value wont display on the screen app. Here is my function and HTML snippet. Think its not necessary providing CSS code before there is nothing of interest to the problem there.

Code from Java Script (actual function):

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">&downarrow; SORT</button>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    1

    Basically problem is solved by disabling "strict mode". Still I do not know why its working in "casual" mode...Some explanation would be good...All consts are defined in the function outer scope and are available for functions scopes...


  2. 0

    the problem is in input argument of calcDisplaySummary. account.movements is not defined in your snippet and therefore I can’t know for sure what is the problem, but if you manually call calcDisplaySummary with fixed values (e.g.: calcDisplaySummary([1, 2, -4, -6, -7])) then you can see the update on the screen. Try to log the account.movements before you call the function and this will bring you one step closer to the solution.

    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(account.movements); // <-- here is your problem
calcDisplaySummary([1,2,-4,-6,-7]);
    <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">&downarrow; SORT</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search