I have responsive design, with padded container around input. Problem is, when user clicks in padded area, input wont be focused.
In jQuery the working code is:
$('.wrap').on('click', function (e) {
$(this).find('input').focus();
});
But can't seem to get it working in JS:
var elm_rows = document.getElementsByClassName("wrap");
elm_rows.addEventListener("click", function (e) {
e.getElementsByTagName("input").focus();
});
Try accessing each of your getElementsBy functions as an array.
Example:
var elm_rows = document.getElementsByClassName("wrap")[0];
elm_rows.addEventListener("click", function (e) {
this.getElementsByTagName("input")[0].focus();
});
To resolve the remaining concern just wrap this in a loop like:
var elm_rows = document.getElementsByClassName("wrap");
for (i in elm_rows) {
elm = elm_rows[i];
elm.addEventListener("click", function (e) {
this.getElementsByTagName("input")[0].focus();
});
}
Could be better, but this works.
e needs to be this in your click callback. (Edited the answer)This should work:
let wrap = document.querySelectorAll('.wrap');
wrap.forEach((el) => {
el.addEventListener('click', (e) => {
// whatever you need to do goes here
});
});
NodeList.prototype does not have forEach().
filter NodeList does not "inherit" from Array's prototype, but you can call any Array function on NodeList by using the .call method (i.e. Array.prototype.map.call(NodeList, function(){}) )today you can use querySelector to find elements on the DOM (and inside some NODE too).
Example:
var els = document.querySelectorAll('.wrap');
for(var i = 0; i < els.length; i++){
els[i].addEventListener('click',function(ev){
var input = ev.target.querySelector('input');
if(input) input.focus();
});
}
The if is required because with that code if you click on the input node, the event will propagate to the .wrap element, and your callback will execute too, but ev.target will be the input node and the query will return null.
var elm_rows = document.getElementsByClassName("wrap");
elm_rows[0].addEventListener("click", function (e) {
e.currentTarget.children[0].focus();
});.wrap {border: 3px solid blue; padding: 15px;}
input {width: 100%;}<div class="wrap">
<input type="text" name="" value="" />
</div>
