document.querySelector("#weekTotalBtn").addEventListener("click", function(){
//function to calculate for dayPay weekly
for(let i = 1; i <= dayPay.length; i++){
//dayPayTotal += parseInt(dayPay[i].value);
dayPayTotal += parseInt(dayPay[i].value);
}
console.log(dayPayTotal);
})
That’s the code, anything written where the console.log is, any command, doesn’t work. I know the button and click works because when I place the console.log inside the loop it works, same reason why I know that the loop is also working, but anything on that console.log line doesn’t work. I have no clue why.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Hello, thank you for making it more readable. I thought the backticks only worked in gitter. Regarding the <=, it seems to be working fine because when I place the console.log command inside the loop, it’s working as intended, it’s just that outside the loop like what you see, doesn’t work. And I really have no clue why.
When I place it inside the loop, it prints as expected (8 then 16 then 24 until 48) but outside BUT should still be alright, nothing occurs. Even if I do document.write, or alert() nothing executes. I’ve posted the codepen link, but the variable was declared outside the eventlistener function and was initialised to 0, which means even if the loop did not work, it should show dayPayTotal = 0;
You have classic case of “off by one” problem.
This line entering the loop: for(let i = 1; i <= dayPay.length; i++)
Arrays start from 0, not 1. And last index would be dayPay.lenght-1 because of that.
So proper way to enter that loop would be: for(let i = 0; i < dayPay.length; i++)
The reason it appears to you that it is "working as intended is because it actually goes over elemets from 1 to dayPay.length, but last element index is dayPay.length-1.
So after it did last element, it tries to access next one like this dayPay[i].value, but there is no element with that index. This will trow exception and your function will exit without finishing rest of itself.
hold your horses! Why does this work??? O.O What sorcery(or sourcery if you play divinity original sin) Length starts with 1 and not 0 so I used 1, but alright, assuming that that was the mistake (which I guess it is) then it should just NOT count a number and give me a wrong numerical value. But it gives me the right value which is 48, and I can see this value via console.log when INSIDE the loop. But outside the loop. the console.log doesn’t work which makes no sense since the loop DOES work. But now that I added - 1 on the length the console.log OUTSIDE the loop suddenly works even though the loop works anyway? Sorry if this is confusing, the problem totally looks confusing to me.
First number is index you use to access element.
You right now try to go from 1 to 7. So it will count elements from 1 to 6, 6 elements total, and trow error white trying to read element with id 7, because there is none.
Also, it does not work like intended, because it does not count first day, with 0 index. Reason why you think it is all ok is because you set it to no work and dont expect it to be counted anyway.
Also, there is no need to add length-1. Just change “<=” to just “<” (less).
Because length is 7, 7<=7 is true, but 7<7 is not, so it will stop on 7.
And start on 0, because thats how arrays start.
ahh I get it now, basically the reason why console.log works inside the loop is because it executes the console.log command each loop and since it is giving me the value that I was expecting I thought that the loop was working alright. But since I was giving it the wrong number of iteration, the loop actually does NOT work and so it does not execute properly. This part though is still confusing, I replaced the console.log(dayPayTotal) with a text, console.log(“hello”) but it doesn’t execute. Whatever happens in that loop shouldn’t affect the next line of code if it’s not related to the variable right? Why doesn’t the console.log(“hello”) execute?
Because you are still in same function. It interrupts in scope it runs in right now, and during error in that loop next top thing is function it runs it. So nothing in that function will run after that. If you place that log method after function it will run just fine afaik.
If you do not trust yourself working with indexes properly, you can just use Array.forEach() method like this, instead of classic for:
forEach method called from array you want to iterate will take care of all the stuff and just give you current element of array as well as index, so if you still confused, you can just use that instead of for loops.
Thanks for the detailed answer, weird that there are no error codes for this but I see what’s happening now thanks to your explanation I’ll use both forEach and for loops just to get used with them, I keep making these idiotic mistakes gotta get used to loops.
I’ll use both forEach and for loops just to get used with them, I keep making these idiotic mistakes 
gotta get used to loops.