Run JavaScript functions when user presses enter

Question

I made a calculator with specific properties in HTML and I would like for the user to be able to press enter to show both of display1() and display2().
In other words, I want the enter key to trigger button Both.

Here is the code I have and what I have tried so far I attempted to add:

<!DOCTYPE html>
<html>
    <head>
        <title>Square Yards Calculator</title>
    </head>

    <body>
        <div id='calc-contain'>

          <form name="calculator">

            <input type="text" name="answer" />
            <br>

            <input type="button" value=" 1 " onclick="calculator.answer.value += '1'" />
            <input type="button" value=" 2 " onclick="calculator.answer.value += '2'" />
            <input type="button" value=" 3 " onclick="calculator.answer.value += '3'" />
            <input type="button" value=" + " onclick="calculator.answer.value += '+'" />
            <br/>

            <input type="button" value=" 4 " onclick="calculator.answer.value += '4'" />
            <input type="button" value=" 5 " onclick="calculator.answer.value += '5'" />
            <input type="button" value=" 6 " onclick="calculator.answer.value += '6'" />
            <input type="button" value=" - " onclick="calculator.answer.value += '-'" />
            </br>

            <input type="button" value=" 7 " onclick="calculator.answer.value += '7'" />
            <input type="button" value=" 8 " onclick="calculator.answer.value += '8'" />
            <input type="button" value=" 9 " onclick="calculator.answer.value += '9'" />
            <input type="button" value=" Flex61 "   onclick="display1()" />
            </br>

            <input type="button" value=" c " onclick="calculator.answer.value = '',
                                document.getElementById('printhere1').innerHTML= '',
                                document.getElementById('printhere2').innerHTML= ''" />

            <input type="button" value=" 0 " onclick="calculator.answer.value += '0'" />
            <input type="button" value=" Both " onclick="display1(),display2()" />
            <input type="button" value=" Gap55 "    onclick="display2()" />
            </br>


          </form>
          <div id="agh">
            <p>Enter how many Square yards (SY) you are covering</p>
            <p id="printhere1"></p>
            <p id="printhere2"></p>
          </div>
        </div>

        <script type="text/javascript">
          function display1(){
            //Assigning the variable to the user input
            var squareyards = eval(calculator.answer.value);
            if (squareyards < 0 || squareyards == null){
                squareyards = 0
            }
            var pounds = 5
            pounds = squareyards * pounds
            // to print the input here
            document.getElementById("printhere1").innerHTML = "For "+ squareyards + " SY sou need: "+ pounds + " lbs of Elasto Flex61";
            }

            function display2(){
                //Assigning the variable to the user input
                var squareyards = eval(calculator.answer.value);
                if (squareyards < 0 || squareyards == null){
                    squareyards = 0
                }
                var rolls = 9
                rolls = Math.ceil(squareyards * rolls / 103)
                // to print the input here
                document.getElementById("printhere2").innerHTML = "For "+ squareyards + " SY sou need: "+ rolls + " Rolls of Gap55 Smooth";
            }
            $(function(){  
                $(':text').bind('keydown',function(e){ //on keydown for all textboxes  
                    if(e.keyCode==13){ //if this is enter key  
                        e.preventDefault();
                        e.display1();
                        e.display2();
                    }             
                });               
            });  

        </script>

    </body>
</html>

[Don't use inline handlers](https://stackoverflow.com/a/59539045), they have a demented scope chain, require global pollution, and have quote escaping issues. Use `addEventListener` instead — CertainPerformance, Apr 02 '20 at 00:45
Hi @Cruxer, I made an example here https://codesandbox.io/s/wonderful-bohr-hil4s , when you press the key enter, you can see the message "hello", if press another key you don't see anything. — Oscar Velandia, Apr 02 '20 at 01:11

score 1 · Accepted Answer · answered Apr 02 '20 at 17:35

You're almost there. It looks like you have a mix of native JavaScript, the document.getElementById stuff and jQuery for the keydown functionality. jQuery's not necessary so I would recommend just using native JavaScript for everything.

So I would refactor this bit:

$(function(){  
    $(':text').bind('keydown',function(e){ //on keydown for all textboxes  
        if(e.keyCode==13){ //if this is enter key  
            e.preventDefault();
            e.display1();
            e.display2();
        }             
    });               
});

To be native JavaScript:

// Capture enter button event on entire page
document.addEventListener('keydown', getAnswer);

// I made it a separate function in case you want to re-use
function getAnswer(e) {
    if (e.keyCode==13) { //if this is enter key  
        e.preventDefault();
        display1();
        display2();
    }             
}

Here is a working codepen.

However, this is just the first step to get it working. Like @certainperformance said the next step would be to remove the document.getElementByIds from the "Clear" button onclick and move them to a separate function.

Hope this helps.

Run JavaScript functions when user presses enter

1 Answers1