1
\$\begingroup\$

I have 3 inputs, when I press enter on them same operations happend.

This is my code

How would you do this better?

    var __this = this;
    var a = document.getElementById("content").getElementsByTagName("more-content")[0].getElementsByTagName("input")[0];
    var b = document.getElementById("content").getElementsByTagName("more-content")[1].getElementsByTagName("input")[0];
    var b = document.getElementById("content").getElementsByTagName("more-content")[2].getElementsByTagName("input")[0];

    a.onkeypress = function (e) {
        if (e.which == 13) {
            // do same stuff here
        }
    };
    b.onkeypress = function (e) {
        if (e.which == 13) {
            // do same stuff here
        }
    };
    b.onkeypress = function (e) {
        if (e.which == 13) {
            // do same stuff here
        }
    };
\$\endgroup\$
5
  • 1
    \$\begingroup\$ It'd be better if you also add corresponding HTML code. \$\endgroup\$
    – Tushar
    Sep 23, 2016 at 10:33
  • 1
    \$\begingroup\$ See this code \$\endgroup\$
    – Tushar
    Sep 23, 2016 at 10:37
  • \$\begingroup\$ @Tushar, i like your example, unfortunately i can paste the html, there are other inputs that don't need the same behavior \$\endgroup\$
    – Dimitri
    Sep 23, 2016 at 10:43
  • \$\begingroup\$ @insertusernamehere , yes i can \$\endgroup\$
    – Dimitri
    Sep 23, 2016 at 11:42
  • \$\begingroup\$ no there are no other inputs where something else happens. just other inputs with nothing to happen on keypress \$\endgroup\$
    – Dimitri
    Sep 23, 2016 at 12:28

1 Answer 1

2
\$\begingroup\$

There are in fact different ways to handle your request. Here's one I'd like to show as it is:

  • re-useable (As you can use it on any element everywhere on the page multiple times.)
  • decoupled from the HTML markup and from CSS classes

HTML

Add a data-*-attribute to the fields where the magic should happen:

<input type="text" name="a" value="a" data-log>

JavaScript

  • query those specific elements
  • attach the event handler to each element
  • run your code

The ES5 way:

var logMe = document.querySelectorAll('[data-log]');

for (var i = 0, max = logMe.length; i < max; i++) {
    logMe[i].addEventListener('keypress', function(event) {
        if (13 == event.which) {
            console.log(this.value);
        }
    }, false);
}

Try it online.

The ES6 way:

let logMe = document.querySelectorAll('[data-log]');

for (let item of logMe) {
    item.addEventListener('keypress', function(event) {
        if (13 == event.which) {
            console.log(this.value);
        }
    }, false);
}

Try it online.


That being said, you can alternatively use CSS classes as well to identify the elements:

<input class="log" type="text" name="a" value="a">

And select the elements using:

let logMe = document.getElementsByClassName('log');
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.