how to get value of one of the input elements from the same class?

Question

Here's my snippet.

Is there any other way other than appending event listener to every element of the class?
I would like to avoid loops if possible.

Yes, there is no way which you have provided, why don't you use id's — Mandeep Singh, Oct 07 '16 at 06:37
Well, I just wanted to value of the input that user entered after "Enter" key — phoxd, Oct 07 '16 at 06:38
Maybe this will help? https://stackoverflow.com/questions/15006208/getting-value-of-multiple-input-fields-with-same-class-and-adding-into-javascrip — Jason Cemra, Oct 07 '16 at 06:38
@PhoxKiD — http://stackoverflow.com/questions/16053357/what-does-foreach-call-do-in-javascript — Rayon, Oct 07 '16 at 06:40

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

Use [].forEach.call() to iterate HTMLCollection

var user_input = document.getElementsByClassName('inp');
[].forEach.call(user_input, function(el) {
  el.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode == 13) {
      console.log(this.value); //this keyword in the handler function refers to element on which event is invoked!
    }
  });
});

<input type="text" class="inp">
<input type="text" class="inp">
<input type="text" class="inp">

edited May 23 '17 at 12:00

Community

1
1

answered Oct 07 '16 at 06:41

Mandeep Singh

1,287
14
34

Hey! It appears you have copied it from somewhere/...Even the formatting is identical :P – Rayon Oct 07 '16 at 06:42
@Rayon, this line [].forEach.call(user_input,function(el) is from urs.. rest i was working on my pc, by using this, i was trying for loop – Mandeep Singh Oct 07 '16 at 06:44
@MandeepSingh— There is nothing else either.. Never mind! Happy coding :) – Rayon Oct 07 '16 at 06:45
Thanks @Rayon, please post your answer with jsbin you provided, learnt one line from you :) – Mandeep Singh Oct 07 '16 at 06:46

score 1 · Answer 2 · answered Oct 07 '16 at 06:42

You could attach a single listener to a parent element (in this case <body>) and use the event.target attribute to get the DOM node that the event fired off.

This works because the event bubbles up through the DOM hierarchy. It's called "Event Delegation"

See these links:

Example Code:

HTML:

<div id="parent">  
    <input type="text" class="inp">
    <input type="text" class="inp">
    <input type="text" class="inp">
</div>

JavaScript:

document.getElementById("parent").addEventListener("keyup", function (event) {
    console.log(event.target.value)
}

How would you target inside element? – phoxd Oct 07 '16 at 06:51 — phoxd, Oct 07 '16 at 06:51

score 1 · Accepted Answer · answered Oct 07 '16 at 07:14

1

I couldn't add comment to Jason Cemra.

In addition to His/Her answer the target element as required by PhoxKiD is the input with the class 'inp'. So place a condition

document.getElementById("parent").addEventListener("keyup", function (event){
    if(event.target.className == 'inp') {
        //your code
    }
    else{  //for other inner elements
        event.preventDefault(); //prevents the default action
        event.stopPropagation(); //stop bubbling up
    }
}

answered Oct 07 '16 at 07:14

Bishwa

56
2

As requested by PhoxKiD, Jason Cemra's approach is without loop/iteration – Bishwa Oct 07 '16 at 07:21
Great! btw what does bubbling mean? – phoxd Oct 07 '16 at 07:23
1

When an event is triggered from an object it bubbles (passes) up towards the object's parent. In the Jason Cemra's answer the event is triggered from the input object and that event bubbles up and handled by its parent. Here in the above code if the event is not triggered from the input with the classname 'inp' the 'event.stopPropagation();' kills the event or pops the bubble out preventing it from further bubbling up. – Bishwa Oct 11 '16 at 07:35

how to get value of one of the input elements from the same class?

3 Answers3