How to select clicked element using querySelector

Question

<div class="search-input" onclick="getSearch()">
              <input
                oninput="getPorts(value)"
                type="text"
                id="pick"
                name="pick"
                placeholder="Enter Pickup Location"
                required
              />
              <div class="autocom-box">
                <!-- dynamic portsData map box  -->
              </div>
            </div>
 <div class="search-input" onclick="getSearch()">
              <input
                oninput="getPorts(value)"
                type="text"
                id="dest"
                name="dest"
                placeholder="Enter Destination"
                required
              />
              <div class="autocom-box">
                <!-- dynamic portsData map box  -->
              </div>
            </div>

This is Js

let searchWrapper;
let inputBox;
let suggBox;

const getSearch = () => {
  searchWrapper = document.querySelector(".search-input");
  console.log(searchWrapper);
  inputBox = searchWrapper.querySelector("input");
  console.log(inputBox);
  suggBox = searchWrapper.querySelector(".autocom-box");
  console.log(suggBox);
};

I am trying to get class selected based click as the class name is same (search-input) but here whichever div i click it always gets selected the 1st one. (In searchWrapper console.log it gives 1st div and its elements)

Can anyone tell me What am i doing wrong here so that i can get 2nd div and its elements if i click on 2nd div.

Answer 1

Two answers for you.

Using modern event handling

I suggest you don't use onxyz-attribute-style event handlers. There are multiple issues with them, but probably the most significant two are:

1. They can only call global functions.
2. The generated context for them is very complex, making it very easy to run into conflicts (for instance, if your function had the name removeChild or appendChild or in some cases submit, you wouldn't end up calling your function, you'd call a method on a DOM element instead).

Instead, look at using addEventListener. Here's an example where the event handlers are directly attached to your div elements:

<div class="search-input">
    <input
        oninput="getPorts(value)"
        type="text"
        id="pick"
        name="pick"
        placeholder="Enter Pickup Location"
        required
    />
    <div class="autocom-box">
        <!-- dynamic portsData map box  -->
    </div>
</div>
<div class="search-input">
    <input
        oninput="getPorts(value)"
        type="text"
        id="dest"
        name="dest"
        placeholder="Enter Destination"
        required
    />
    <div class="autocom-box">
        <!-- dynamic portsData map box  -->
    </div>
</div>

const getSearch = (event) => {
    const searchWrapper = event.currentTarget;
    const inputBox = searchWrapper.querySelector("input");
    const suggBox = searchWrapper.querySelector(".autocom-box");
    // ...
};

for (const element of document.querySelectorAll(".search-input")) {
    element.addEventListener("click", getSearch);
}

I only did the div elements there, but you'd want to do the input elements as well.

You might also look at delegated event handling.

Continuing with onclick attribute

If you really want to keep using the onclick attribute, pass this into it:

<div class="search-input" onclick="getSearch(this)">
<!-- −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^  -->

this in the context generated for onxyz-attribute-style event handlers is the element the onclick attribute is on (the .search-input div in this case).

Then, in getSearch, search within that div:

const getSearch = (searchWrapper) => {
    const inputBox = searchWrapper.querySelector("input");
    const suggBox = searchWrapper.querySelector(".autocom-box");
    // ...
};

Answer 2

First of all stop using inline event listeners. Use addEventListener instead. To do so, grab a list of all search input wrappers and iterate over the list, adding a click listener to each and every one.

When you have done so, the handler function automatically gets passed the event object, which contains the currentTarget property holding a reference to the element the event listener is bound to. This then allows you to find descendants of that element using querySelector on it instead of document.

To access the event object, you need to define a parameter name in your handler function. I've used event in below example, but you can name it anything you like.

let searchWrapper;
let inputBox;
let suggBox;

const getSearch = (event) => {
  searchWrapper = event.currentTarget;
  console.log(searchWrapper);
  inputBox = searchWrapper.querySelector("input");
  console.log(inputBox);
  suggBox = searchWrapper.querySelector(".autocom-box");
  console.log(suggBox);
};

for (const searchInput of document.querySelectorAll('.search-input')) {
  searchInput.addEventListener('click', getSearch);
}

<div class="search-input">
  <input type="text" id="pick" name="pick" placeholder="Enter Pickup Location" required />
  <div class="autocom-box">
    1. abc
  </div>
</div>
<div class="search-input">
  <input type="text" id="dest" name="dest" placeholder="Enter Destination" required />
  <div class="autocom-box">
    2. def 
  </div>
</div>