I have to write a code that run click event on all inputs with the same class without a loop and jquery.
What I come up with is :
document.body.addEventListener('click', function (click) {
if (click.target.className == 'abc') {
document.frame.screen.value += this.value;
}
});
and click works but I got undefined instead of value that clicked input contain.
and click works but I got undefined instead of value that clicked input contain.
Because you've used this instead of click.target when getting the value; you wanted to use click.target:
document.frame.screen.value += click.target.value;
// Here -----------------------^^^^^^^^^^^^
this in your handler will be document.body. You've correctly used click.target when checking the class, but not when getting the value.
Some notes:
event or e, not click.className. If that's a possible issue for you, you might look at .classList.contains("abc") instead. (classList is available on all modern browsers, and you can polyfill it on obsolete ones.)It's not an issue for input elements, but in future if you want to do this with elements that can have descendant elements, you might need to have a loop to handle the possibility the click was on a descendant of your target element:
var node = event.target;
while (!node.classList.contains("abc")) {
if (node === this) {
return; // The click didn't pass through a matching element
}
node = node.parentNode;
}
// Use it here
thisis going to bedocument.bodysovaluewon't exist.