0

The show-text class is being added to the first div only. Can anyone tell why?

https://code.sololearn.com/WHifvUQ2Qm3u/?ref=app

2nd Jun 2021, 4:00 PM
dheeraj gupta
dheeraj gupta - avatar
12 Respuestas
+ 3
fixed (and refactored for more simplicity ^^): https://code.sololearn.com/WxDG3basLSDN/?ref=app
2nd Jun 2021, 5:31 PM
visph
visph - avatar
+ 2
Vasiliy it may be a good habit to decouple form from logic (as well as form from style) the sooner: bad habits have often too long hard life ^^ however, I am agree with you: for quick testing / building first drafts, it may be useful to use html inlined attributes as well as js element properties ;)
3rd Jun 2021, 12:01 PM
visph
visph - avatar
+ 1
visph thanks man. You're the best👋
2nd Jun 2021, 5:36 PM
dheeraj gupta
dheeraj gupta - avatar
+ 1
visph, we are all slaves to our habits ☺️
3rd Jun 2021, 12:32 PM
Solo
Solo - avatar
+ 1
Vasiliy :D it's time to unchained themselves!
3rd Jun 2021, 12:40 PM
visph
visph - avatar
+ 1
add this in your 'fun' function: btns.forEach(b => b!=this && b.parentElement.nextElementSibling.classList.contains("show-text") && b.click());
6th Jun 2021, 2:49 PM
visph
visph - avatar
0
I beg your pardon, I could not resist ☺️: let btns = document.querySelectorAll('.btn'); /*traversing through the DOM*/ btns.forEach( btn => btn.onclick = function(){ this.parentElement.nextElementSibling. classList.toggle("show-text"); this.querySelector('.fa-minus-square'). classList.toggle("show-minus"); this.querySelector('.fa-plus-square'). classList.toggle("hide-plus"); });
2nd Jun 2021, 8:40 PM
Solo
Solo - avatar
0
Vasiliy by doing like your example, you assign each onclick attribute with a new function... keeping the function outside of the loop, you will assign the same function to each buttons using addEventListener, you prevent the handler function to be overrided by another assignement to it
2nd Jun 2021, 8:45 PM
visph
visph - avatar
0
visph — "The sum does not change from changing the places of the addends" ☺️, but the addEventListener() method adds an event handler to the element without overwriting the existing event handlers, which is absolutely unnecessary in this case.
3rd Jun 2021, 10:13 AM
Solo
Solo - avatar
0
Vasiliy I don't understand your quote ^^ (english is not my natural language) anyway, you cannot be sure that it is or will be unecessary... and it's considered better practice to use addEventListener than event attributes (some event don't even have their counterpart as attribute ;P)
3rd Jun 2021, 10:22 AM
visph
visph - avatar
0
visph The fact that someone thought that it is better to use addEventListener than event attributes does not mean that it needs to be used everywhere, often the simpler the better, it all depends on the task at hand, and this statement implies the use of the event attribute directly in the html tag of the document, (this is not the case in this example).
3rd Jun 2021, 11:56 AM
Solo
Solo - avatar
0
How to hide the answer when other answer is visible?
6th Jun 2021, 10:53 AM
dheeraj gupta
dheeraj gupta - avatar