Question

第一次在网站上，无论如何我的问题是当我使用onkeydown然后使用GetChar来检查是否按下了回车键，当运行operAtion时，该功能的结果仅在屏幕上显示大约一秒钟然后消失，如果用户使用onclick（单击enter按钮），则不会发生此问题。当使用onkeydown时，如何让操作结果保持在屏幕上。如果你想看看我的意思，网站是sqrtcalc.comze.com

sqrtcalc

<!DOCTYPE html>

<html>
<head>

<title>Square Root Calculator</title>

    <script language="javascript">
        function operAtion (form){
            var x = form.inputbox.value;
                if (isNaN(x)){
                    //document.write("lawl");
                    var y = "Enter a number";
                    document.getElementById("failsafe").innerHTML = y;
                    document.getElementById("demo").innerHTML = "";
                } else if (x < 0){
                    var y = "Number must be positive";
                    document.getElementById("failsafe").innerHTML = y;
                    document.getElementById("demo").innerHTML = "";
                } else if (x == ""){
                    var y = "uhm, you didnt enter anything";
                    document.getElementById("failsafe").innerHTML = y;
                    document.getElementById("demo").innerHTML = "";
                } else {
                    var y = Math.pow(x, 1/2)
                    document.getElementById("demo").innerHTML = "The square root of " + x + " is " + y;
                    document.getElementById("failsafe").innerHTML = "";
                }
        }
        function GetChar (event,form){
            var keyCode = event.keyCode;
                if (keyCode == 13){
                operAtion(form);
                }
        }
    </script>

<p></p>
</head>
<body>

<form name="myform" action="" method="get" style = "font-size:50px"><strong>Square Root Calculator</strong></br>
    </br>
<input type="text" name="inputbox" value = "" onkeydown = "GetChar(event,this.form);"> </br>
    </br>
<input id="button" type="button" name="button" value="     Enter      " onclick="operAtion(this.form)" >
</form>

<h1 id = "failsafe"></h1>
</br>
</br>
</br>
<h1 id = "demo"></h1>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<img border="0"  src="http://counter.rapidcounter.com/counter/1353157574/a"; ALIGN="middle" HSPACE="4" VSPACE="2" style = "padding-left:1400px;">

</body>
</html>

Answer 1

添加此代码：

        window.onload = function(){
            document.getElementById("myform").onsubmit = function(){
                return false;
            }
        }

并将id属性id="myform"添加到<form>代码。

Answer 2

我重构了你的代码：

我删除了你的内联函数（内联JS并不是最好的实践）
我在您的表单中添加了一个ID，以便可以引用
我添加了return false;以阻止表单提交
onsubmit处理单击并输入

<强>的Javascript

document.getElementById('myform').onsubmit = function() {
    var x = this.inputbox.value;

    if (isNaN(x)) {
        //document.write("lawl");
        var y = "Enter a number";
        document.getElementById("failsafe").innerHTML = y;
        document.getElementById("demo").innerHTML = "";
    } else if (x < 0) {
        var y = "Number must be positive";
        document.getElementById("failsafe").innerHTML = y;
        document.getElementById("demo").innerHTML = "";
    } else if (x == "") {
        var y = "uhm, you didnt enter anything";
        document.getElementById("failsafe").innerHTML = y;
        document.getElementById("demo").innerHTML = "";
    } else {
        var y = Math.pow(x, 1 / 2)
        document.getElementById("demo").innerHTML = "The square root of " + x + " is " + y;
        document.getElementById("failsafe").innerHTML = "";
    }

    return false;
}

<强> HTML

<form name="myform" action="" method="get" style="font-size:50px" id="myform"><strong>Square Root Calculator</strong><br>
    <br>
<input type="text" name="inputbox"> <br>
    <br>
<input id="button" type="submit" name="button" value="     Enter      ">
</form>

<h1 id="failsafe"></h1>

<h1 id="demo"></h1>

Working demo

Javascript onkeydown函数运行然后显示消失

2 个答案: