How to get element's data value using oninput event

Question

Is it possible to get element's data in the way like in the example below
or - any similar way - except addEventListener

currently I'm getting error - e is not defined

Expecting result should be - lorem - ipsum - dolor - by typing inside the three inputs respectively

function on_input(e){
    let a = e.target.data('x');
  console.log(a);
}

<input type='text' class='inp' oninput="on_input()" data-x='lorem'>
<input type='text' class='inp' oninput="on_input()" data-x='ipsum'>
<input type='text' class='inp' oninput="on_input()" data-x='dolor'>

You need to pass `event` as argument for `oninput` event handler. Also, to read the data attributes, Use `e.target.dataset.x`. `Elem.data()` is jQuery version of the same. — Rayon, Sep 07 '22 at 11:39

score 1 · Accepted Answer · answered Sep 07 '22 at 11:37

1

You should add the element as parameter into the function.

function on_input(elem){
    let a = elem.getAttribute("data-x");
  console.log(a);
}

<input type='text' class='inp' oninput="on_input(this)" data-x='lorem'>
<input type='text' class='inp' oninput="on_input(this)" data-x='ipsum'>
<input type='text' class='inp' oninput="on_input(this)" data-x='dolor'>

answered Sep 07 '22 at 11:37

Webdeveloper_Jelle

2,868
4
29
55

2

Op wanted event in the function. This is a massive dupe in any case – mplungjan Sep 07 '22 at 11:41
1

bcoz obvious duplicate question, is ask every day – Barney Sep 07 '22 at 11:43
1

@mplungjan he does not say that. This is no doubt a dupe but my answer does what he asked 1000%. – Webdeveloper_Jelle Sep 07 '22 at 11:43
3

so does `oninput="on_input(event)"` without having to change the function except for e.target.dataset.x to get the attribute. – mplungjan Sep 07 '22 at 11:43

How to get element's data value using oninput event

1 Answers1