当用户按下回车键时运行 JavaScript 函数

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() .我在 HTML 中制作了一个具有特定属性的计算器，我希望用户能够按 Enter 键显示display1()和display2() 。
In other words, I want the enter key to trigger button Both .换句话说，我希望 enter 键触发按钮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>

Answer 1

You're almost there.您快到了。 It looks like you have a mix of native JavaScript, the document.getElementById stuff and jQuery for the keydown functionality.看起来您混合了本机 JavaScript、 document.getElementById内容和用于 keydown 功能的 jQuery。 jQuery's not necessary so I would recommend just using native JavaScript for everything. jQuery 不是必需的，所以我建议只对所有内容使用原生 JavaScript。

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:要成为原生 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 .这是一个有效的codepen 。

However, this is just the first step to get it working.然而，这只是让它工作的第一步。 Like @certainperformance said the next step would be to remove the document.getElementById s from the "Clear" button onclick and move them to a separate function.就像@certainperformance 所说，下一步是从 onclick 的“清除”按钮中删除document.getElementById s，并将它们移动到一个单独的函数中。

Hope this helps.希望这可以帮助。

当用户按下回车键时运行 JavaScript 函数

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-04-02 17:35:55

当用户按下回车键时运行 JavaScript 函数

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-04-02 17:35:55

解决方案1
1 已采纳 2020-04-02 17:35:55