How to select and toggle element inside the div in javascript

Question

I need to toggle an icon inside the div element. The main issue for me is that toggling will happen everytime an user clicks on the div, not on the icon.

HTML

<div class="faq__questions-question" ><span>Lorem ipsum?</span><i class="fas fa-minus"></i></div>

What I've been tryin to do was adding onclick event inside the icon or div but it works only on itself. <i onclick="myFunction(this)" class="fas fa-minus"></i>

then my javascript is

function myFunction(x) {
  x.classList.toggle("fa-plus");
}

How can I select only an icon class while clicking on the whole div? I think I'd need to use onclick event on the div:

<div onclick"myFunction()" class="faq__questions-question" ><span>Lorem ipsum?</span><i class="fas fa-minus"></i></div>

but what should I do to my javascript code?

`onclick"myFunction()"` isn’t valid syntax and it’s missing the argument; also, inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Apr 02 '21 at 10:13
Use [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple events — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target). See [the tag info](https://stackoverflow.com/tags/event-delegation/info) and [What is DOM Event delegation?](https://stackoverflow.com/q/1687296/4642212). — Sebastian Simon, Apr 02 '21 at 10:13
The answer here will help you understand how to do it https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli — shabtai levi, Apr 02 '21 at 10:33
https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli The answer here will help you understand how to do it — shabtai levi, Apr 02 '21 at 10:34

score 1 · Answer 1 · answered Apr 02 '21 at 11:00

I hope this is what you want.

document.querySelector('.faq__questions-question').addEventListener('click', e => {
  const icon = e.currentTarget.querySelector('.fas');
  icon.classList.toggle('fa-minus');
  
})

.faq__questions-question {
  border: 1px solid black;
}

.fa-minus {
  color: red;
}

<div class="faq__questions-question">
  <span>Lorem ipsum?</span>
  <i class="fas fa-minus">hi</i>
</div>

Eloi · Answer 2 · 2021-04-02T10:37:03.493

Is always better to use CSS if possible: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#user_action_pseudo-classes

But if is not possible in your case and want to use JS, use element.addEventListener('click', function) instead of onclick, for that you first need to select the element in the DOM:

let selectedElement = document.querySelector('.fas');
selectedElement.addEventListener('click', function(){
  selectedElement.classList.toggle('fa-plus');
});

You can select a different element or the whole DIV depending of which area you want to be clickable and then do another selection for the element where you want to change the class.

let clickableElement = document.querySelector('.classClickableElement');
clickableElement.addEventListener('click', function(){
  let targetElement = document.querySelector('.classTargetElement');
  targetElement.classList.toggle('toggleClass');
});

Also you can read about querySelector here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

score 0 · Answer 3 · answered Apr 04 '21 at 07:57

get the child element (omit spaces between tags)

HTML :

<div class="faq__questions-question" ><span>Lorem ipsum?</span><i class="fas fa-minus"></i></div>

JavaScript :

let c = document.getElementsByClassName("faq__questions-question")
for(let x of c) {
   x.addEventListener('click', function() {
      x.childNodes[1].classList.toggle('fa-minus')
   })
}

How to select and toggle element inside the div in javascript

3 Answers3