I can't find the container using an only child in JavaScript

Question

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>

I made you a snippet. Please click [edit] and add missing HTML and relevant CSS if needed — mplungjan, Jan 11 '23 at 11:08
Why are you using `===`? You don't need a strict equality comparison there, the `==` operator will work just fine. — Armen Michaeli, Jan 11 '23 at 11:10
@ArmenMichaeli Why would you suggest to NOT use === over ==, the issue here is the innerHTML could have all sorts of whitespace — mplungjan, Jan 11 '23 at 11:14
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. — Armen Michaeli, Jan 11 '23 at 11:18
@mplungjan Also, what does `===` have to do with whitespace?! You do understand it (the former) only concerns type coercion, right? I am confused by the last part of your comment. — Armen Michaeli, Jan 11 '23 at 11:23
@ArmenMichaeli So I started 2 years before you. The number of errors I have seen in the over the questions I have answered (6 digits) that had a gotcha due to the coercion of the == is staggering. MDN: `In most cases, using loose equality is discouraged. The result of a comparison using strict equality is easier to predict, and may evaluate more quickly due to the lack of type coercion.` — mplungjan, Jan 11 '23 at 11:25
ONE of the potential issues here is NOT the ===/== but the use of innerHTML vs textContent (not related to ===). BUT using === and then being told to use == is simply wrong. — mplungjan, Jan 11 '23 at 11:26
My experience is not aligned with yours and searching among your answers for "strict" I did not find anything that can be called "staggering" amount of questions to support your claim. I would argue that if you recommend people use `===` over `==` you only have them gloss over their lack of understanding of both, otherwise they'd have no issue using `==`, as I certainly haven't. There is a good argument against using `===` by default -- it is surprising to the reader, especially polyglots who are used to `==` in other languages. Also, I'd dare say performance of `==` never bothered anyone. — Armen Michaeli, Jan 11 '23 at 11:53

mplungjan · Answer 1 · 2023-01-11T11:41:13.303

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>

I can't find the container using an only child in JavaScript

1 Answers1