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

Question

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

Answer 1

fixed (and refactored for more simplicity ^^):

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

Answer 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 ;)

Answer 3

visph thanks man. You're the best👋

Answer 4

visph, we are all slaves to our habits ☺️

Answer 5

Vasiliy :D it's time to unchained themselves!

Answer 6

add this in your 'fun' function:

btns.forEach(b => b!=this && b.parentElement.nextElementSibling.classList.contains("show-text") && b.click());

Answer 7

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");
});

Answer 8

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

Answer 9

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.

Answer 10

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)

Answer 11

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).

Answer 12

How to hide the answer when other answer is visible?