Why does the second script code break the first? (JavaScript)

Question

https://code.sololearn.com/WUnudHPrv2Ke/#html

I made these two codes as two examples to understand the difference between bubbling and capturing, they work fine by their own, but when they are added together like this for some reason they effect each other, but why? They have different id, so I don't understand what's the problem.

Answer 1

Quick fix: Just rename the variable in second script

Answer 2

Karak10 Every small script gets squished into one long script. The variable and functions also carry over.

Answer 3

Karak10 I don't know exact mechanics at work, but I assume redeclaring function with same name simply reassigns a pointer to a new function. As you added a listener to the old function, it is still accessible through it, while function with that name now is different function.

Answer 4

🇮🇳Vivek🇮🇳 it worked, I don't understand why tho, I thought it's okay to reuse same names for varieties as long as they are in different script tags

Answer 5

BlazingMagpie I used same function names tho and there is no problem, everything works fine