1

第一次在网站上，无论如何我的问题是当我使用onkeydown然后使用GetChar检查是否按下了回车键时，当操作运行时，函数的结果只在屏幕上显示大约一秒钟然后消失，如果用户使用onclick（点击回车按钮），则不会出现此问题。使用 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>
4

2 回答 2

0

添加此代码：

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

并将 id 属性添加id="myform"到<form>标签中。

于 2012-11-18T06:44:10.630 回答
0

我稍微重构了你的代码：

  • 我删除了你的内联函数（内联 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>

工作演示​</p>

于 2012-11-18T07:12:12.910 回答