-1

我正在尝试创建一个带有一个文本框和一个按钮的页面，当单击按钮时，它将值发送到 javascript，然后写入内容。我花了很长时间寻找，我看不出我做错了什么。这是脚本和页面。

HTML：

    <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>RDP</title>
       <link rel = "stylesheet" type = "text/css" 
             href = "css/style.css">
    </head>

    <body>  
        <div class='center'>
          <div class='header'>
              <h1>Home</h1>
          <h2></h2>
        </div>
          <div class='sidebar'>
            <ul>
                <li><a href='index.html'>Home</a></li>
                <li><a href='divevideo.html'>Video</a></li>
                <li>Dive Calculator</li>
            <li><a href='images.html'>Images</a></li>
         </ul>
      </div>
        <div class='main'>
         <p><form>Depth:<input name="Depth" type="text" id="Depth"value="35" size="3" maxlength="3">
            <input name="Calculate" type="button" id="calculate" onClick="DepthEntered()"     value="Calculate"></form></p>
         <p id='divetimes'></p>
         <script src="jsfiles/nodecom.js"></script>
      </div>
      <div class='footer'>
      </div>
    </div>
    </body>

   </html>

Javascript：

// JavaScript Document
function DepthEntered()
{
    var depth = document.getElementById("Depth").value;
    var nodetime;
    var sstime;

    //depth = window.prompt('What was your depth?')

    //depth = 62 //temperary test variable. remove to return to dynamic.

    if( depth >= 35 )
    {
        nodetime = 205
        sstime = 152
    }
    if( depth > 35 && depth >= 40 )
    {
        nodetime = 140
        sstime = 111
    }
    if( depth > 40 && depth >= 50 )
    {
        nodetime = 80
        sstime = 67
    }
    if( depth > 50 && depth >= 60 )
    {
        nodetime = 55
        sstime = 49
    }
    if( depth > 60 && depth >= 70 )
    {
        nodetime = 40
        sstime = 35
    }
    if( depth > 70 && depth >= 80 )
    {
        nodetime = 30
        sstime = 26
    }
    if( depth > 90 && depth >= 100 )
    {
        nodetime = 25
        sstime = 22
    }
    if( depth > 100 && depth >= 110 )
    {
        nodetime = 20
        sstime = 0
    }
    if( depth > 110 && depth >= 120 )
    {
        nodetime = 16
        sstime = 0
    }
    if( depth > 120 && depth >= 130 )
    {
        nodetime = 10
        sstime = 0
    }
    if( depth > 130 && depth >= 140 )
    {
        nodetime = 8
        sstime = 0
    }
    if( depth > 140 )
    {
        document.getElementById("divetimes").innerHTML = ('<p>There is no safe no decompression time for this depth.</p>');
    }
    else
    {
        document.getElementById("divetimes").innerHTML = ('<p>At that depth your no decompression limit is <em class = myclass2>' + nodetime + '</em> minutes. You need to make a saftey if your down at least <em class = myclass3>' + sstime + '</em> minutes.</p>'); 
    };
}

另外我怎样才能使它只能输入数字？

4

3 回答 3

1

确保您的 JavaScript 在您的 HTML 之下，因此DepthEntered()是在窗口范围内定义的。看到这个小提琴：http: //jsfiddle.net/BrKJX/1/。您的代码按原样工作！

于 2013-10-29T18:26:19.683 回答
0

使用 jQuery：

jQuery(function($) {
    $(document).on('keydown', '.numberOnly', function(e) {
        if(!((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 97 && e.keyCode <= 106) || e.keyCode == 8)) {
            e.preventDefault();
        }
    });
});

jsFiddle

于 2013-10-29T18:25:50.807 回答
0

在 HTML5 中，输入 type='number' 可确保输入的输入类型仅为数字。在输入标签的末尾添加 'required 将确保用户在提交之前输入一个数字。适用于大多数浏览器。IE

<input name="Depth" type="number" id="Depth"value="35" size="3" maxlength="3" required>

加上让它工作，你可以尝试在javascript中将它解析为一个整数。var d= parseInt(深度);

希望能帮助到你！:)

于 2013-10-29T18:26:40.217 回答