1

I have a project. I am working to find a container using an only child in JavaScript.

I want to add a class to the container of the req-address.

I want to take req in Javascript using an only child of this element. How to do it?

const search = document.querySelector('.search-form');
const addresses = document.querySelectorAll('.req-address');

search.addEventListener('keyup', function(e) {
  addresses.forEach(function(address) {
    if (address.innerHTML === search.value) {
      address.classList.add('.search-active');
    }
  });
});
<div class="reqs-container">
  <div class="req">
    <div class="req-time">
      <div class="req-time_from">13:00</div>
      <span></span>
      <div class="req-time_to">15:00</div>
    </div>
    <div class="req-restaurant">Argentina Grill</div>
    <div class="req-address">Оболонь</div>
    <div class="req-name">Аліна</div>
    <a href="#" class="req-instagram">Instagram</a>
    <a href="#" class="req-confirm">Приєднатися</a>
  </div>
  <div class="req">
    <div class="req-time">
      <div class="req-time_from">13:00</div>
      <span></span>
      <div class="req-time_to">15:00</div>
    </div>
    <div class="req-restaurant">Argentina Grill</div>
    <div class="req-address">Хрещатик</div>
    <div class="req-name">Аліна</div>
    <a href="#" class="req-instagram">Instagram</a>
    <a href="#" class="req-confirm">Приєднатися</a>
  </div>

</div>

Improve this question
9
  • I made you a snippet. Please click edit and add missing HTML and relevant CSS if needed Commented Jan 11, 2023 at 11:08
  • Why are you using ===? You don't need a strict equality comparison there, the == operator will work just fine. Commented Jan 11, 2023 at 11:10
  • @ArmenMichaeli Why would you suggest to NOT use === over ==, the issue here is the innerHTML could have all sorts of whitespace Commented Jan 11, 2023 at 11:14
  • @Jan Pfeifer, yes! Thank you so much! Commented Jan 11, 2023 at 11:15
  • I see a lot of people who struggle with simple JavaScript habitually use === which to me is an alarming trend (if it wasn't one earlier). I have been writing JavaScript since about 1998 -- long time to learn to see through dubious advice -- and I can count on one hand amount of times I needed ===, the code above is certainly not an example where === should be used because a) it surprises the reader b) it isn't necessary (so should be omitted because see point a). I will always point this out and there is no convincing me === has any use beyond where it actually must be used. Commented Jan 11, 2023 at 11:18

1 Answer 1

Reset to default
0

You needed to remove the dot from the class in .classList.add('.search-active')

To add to the parent div with class = req, you can use

address.closest('div.req')

Here is an alternative version which will toggle instead of just add.

Also I use input event since it handles paste too

Lastly I use includes, textContent, trim and toLowerCase to give the user a better chance to find stuff since innerHTML could have all sorts of whitespace

If you insist on the complete value in the address field must be typed to be found, change

address.textContent.toLowerCase().trim().includes(val)

to

address.textContent === val

const search = document.querySelector('.search-form');
const addresses = document.querySelectorAll('.req-address');

search.addEventListener('input', function(e) {
  const val = this.value.toLowerCase();
  addresses.forEach(address => address.closest('div.req').classList.toggle('search-active', address.textContent.toLowerCase().trim().includes(val)));
});
.search-active { color: green }
<input type="text" class="search-form" />
<div class="reqs-container">
  <div class="req">
    <div class="req-time">
      <div class="req-time_from">13:00</div>
      <span></span>
      <div class="req-time_to">15:00</div>
    </div>
    <div class="req-restaurant">Argentina Grill</div>
    <div class="req-address">Оболонь</div>
    <div class="req-name">Аліна</div>
    <a href="#" class="req-instagram">Instagram</a>
    <a href="#" class="req-confirm">Приєднатися</a>
  </div>
  <div class="req">
    <div class="req-time">
      <div class="req-time_from">13:00</div>
      <span></span>
      <div class="req-time_to">15:00</div>
    </div>
    <div class="req-restaurant">Argentina Grill</div>
    <div class="req-address">Хрещатик</div>
    <div class="req-name">Аліна</div>
    <a href="#" class="req-instagram">Instagram</a>
    <a href="#" class="req-confirm">Приєднатися</a>
  </div>

</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments