Using the enter key to call a function

Question

I am writing code for a simple web application that tells your word per minute while typing. It is set up in a table and there is a button to click when you finish. This works though it wastes some time which in turn effects the result. I am trying to come up with a way to call the same function when hitting enter as it would when you press the button.

Here is my function.

function finishTest() {
    finish = new Date();
    endType = finish.getTime();
    totalTime = ((endType - startType) / 1000);
    speed = Math.round((word/totalTime) * 60);
    var totalTime1 = totalTime.toFixed(2);

    if (document.form.typed.value == document.form.textArea.value) {
        document.getElementById("correct").innerHTML = "You were able to type a  " + word + " word sentence in "
            + totalTime1 + " seconds, a speed of roughly " + speed + " words per minute!";
    }
}

Here is the table where I want the function to be called by hitting enter.

<tr>
    <td colspan=2>
        <center>
            <input id = "typed" type=text name="typed" size=45>
            <input type=button value="FINISH!"  name="finish"onClick="finishTest()">
        </center>
    </td>
</tr>

score 0 · Answer 1 · answered Feb 04 '14 at 19:20

0

Add this in your document

$(document).keydown(function(e){
    if (e.keyCode == 13) { 
       finishTest();
       return false;
    }
});

Or if you want it specifcally to apply to that table i'm sure you could change $(document) to $("#typed")

answered Feb 04 '14 at 19:20

rootsup

315
2
17

What happens when you hit enter a bunch of times? – Stephen Corcoran Feb 04 '14 at 19:24
Is there anywhere specific to add it too my document? When I just add it, nothing happens and I get this. "Uncaught ReferenceError: $ is not defined." in the console of Chrome. – Craig Feb 04 '14 at 19:27
this is added in your script, so between the tags – rootsup Feb 04 '14 at 19:34

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

You can launch your function with an eventlistener.

See:

execute function on enter key

edited May 23 '17 at 12:21

Community

1
1

answered Feb 04 '14 at 19:22

developers-have-no-vacation

642
1
5
13

score 0 · Answer 3 · answered Feb 04 '14 at 19:30

0

You can simply do:

document.getElementById('typed').addEventListener('keyup', function(e) {
   if (e.keyCode === 13)
       finishTest();
});

This will listen for enter in your textBox and fire your function,

See this FIDDLE for an example

answered Feb 04 '14 at 19:30

Shryme

1,572
1
14
22

I see that this works in your fiddle. I am getting this error though "Uncaught TypeError: Cannot call method 'addEventListener' of null" – Craig Feb 04 '14 at 19:40
The reason is because it don't find your input, make sure that inside your getElementById you put the id of your input. If it is the right id, you could try placing all your javascript inside `window.addEventListener('DOMContentLoaded', function() { PLACE CODE HERE }` to make sure the input is create when it bind the event – Shryme Feb 04 '14 at 19:44

Using the enter key to call a function

3 Answers3