<div onclick="getSearch()">
<input
oninput="getPorts(value)"
type="text"
id="pick"
name="pick"
placeholder="Enter Pickup Location"
required
/>
<div >
<!-- dynamic portsData map box -->
</div>
</div>
<div onclick="getSearch()">
<input
oninput="getPorts(value)"
type="text"
id="dest"
name="dest"
placeholder="Enter Destination"
required
/>
<div >
<!-- 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.
CodePudding user response:
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:
- They can only call global functions.
- 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
orappendChild
or in some casessubmit
, 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 >
<input
oninput="getPorts(value)"
type="text"
id="pick"
name="pick"
placeholder="Enter Pickup Location"
required
/>
<div >
<!-- dynamic portsData map box -->
</div>
</div>
<div >
<input
oninput="getPorts(value)"
type="text"
id="dest"
name="dest"
placeholder="Enter Destination"
required
/>
<div >
<!-- 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 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");
// ...
};
CodePudding user response:
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 >
<input type="text" id="pick" name="pick" placeholder="Enter Pickup Location" required />
<div >
1. abc
</div>
</div>
<div >
<input type="text" id="dest" name="dest" placeholder="Enter Destination" required />
<div >
2. def
</div>
</div>