Question

我正在尝试创建一个带有一个文本框和一个按钮的页面，当单击该按钮时，它将值发送到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>'); 
    };
}

另外我怎样才能这样做才能输入数字？

Answer 1

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

Answer 2

使用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

Answer 3

使用HTML5，输入type ='number'可确保输入的输入类型仅为数字。在输入标记的末尾添加“必需”将确保用户在提交之前输入数字。适用于大多数浏览器。即。

＆lt; input name =“Depth”type =“number”id =“Depth”value =“35”size =“3”maxlength =“3”required＆gt;

加上使它工作，您可以尝试将其解析为javascript中的整数。 var d = parseInt（depth）;

希望它有所帮助！：）

将HTML表单值传递给javascript

3 个答案:

jsFiddle