Question

我正在尝试为简单的物理方程式构建计算器。使用Web表单收集数据，然后应该返回答案并更新到原始网页上。但无论我做什么或改变什么，我都无法得到在网页上显示的答案。为什么这不起作用？

HTML：

<!DOCTYPE html>
<html>
<head>
<link href="../../Styles/style.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/Scripts/Calculator.js"></script>
<title>Physics calculator</title>
</head>
<body>
<h1>F=MA calculator</h1>

<div>
    <img src="fma.jpg">
</div>

<div>
    <form>
      Force: <input type="text" name="force" id='force'>
    </form>
    <form>
      Mass: <input type="text" name="mass" id='mass'>
    </form>
    <form>
      Acceleration: <input type="text" name="acc" id='acc'>
    </form>

    <div>
    <input type="button" value="Calculate" id='calculate'>
    </div>

    <div>
        <p id='answer'></p> 
    </div>


</div>

使用Javascript：

$(document).ready(function() {
$('#calculate').on('click', function() {
        var F = $('#force').val();
        var M = $('#mass').val();
        var A = $('#acc').val();

        if (F!=="number" && typeof M==="number" && typeof A==="number") {   
            var FMA = M*A;
            $('#answer').html("The force is " +FMA " Newtons.")
        }


        else if (typeof M!=="number" && typeof F==="number" && typeof A==="number") {
            var MFA = F/A;
            var $output2 = $('<p>The mass is ?? kg.</p>');
            $('#answer').html("The mass is " +MFA " kg.")
        }


        else if (typeof A!=="number" && typeof F==="number" && typeof M==="number") {
            var AFM = F/M;
            $('#answer').html("The acceleration is " +AFM " metres per second sqaured.");
        }


        else {
            $('#answer').html("A calculation error has occurred.");
        }
});

}）;

Answer 1

您有typeof和连接错误（如果您对无限结果不感兴趣） Try with:

$('#calculate').on('click', function() {

    var F = parseInt( $('#force').val(), 10);
    var M = parseInt( $('#mass').val(), 10);
    var A = parseInt( $('#acc').val(), 10);
    var msg = "A calculation error has occurred.";

           if (isNaN(F) && M && A) {
        msg = "The force is "+ (M*A) +" Newtons."; 
    } else if (isNaN(M) && F && A) {
        msg = "The mass is "+ (F/A) +" kg.";
    } else if (isNaN(A) && F && M) {
        msg = "The acceleration is "+ (F/M) +" metres per second sqaured.";
    }

    $('#answer').html(msg);
});

Answer 2

我编辑了你的代码。我更喜欢使用isNaN函数来检查值是否实际上是一个数字。在连接答案字符串时，你也错过了一个加号。

$（＆＃39;＃calculate＆＃39;）。on（＆＃39; click＆＃39;，function（）{

    var F = $('#force').val(),
        M = $('#mass').val(),
        A = $('#acc').val();

    if (isNaN(F) && !isNaN(M) && !isNaN(A)) {

        var FMA = M*A;
        $('#answer').html("The force is " + FMA + " Newtons.");

    } else if (isNaN(M) && !isNaN(F) && !isNaN(A)) {

        var MFA = F/A;
        var $output2 = $('<p>The mass is ?? kg.</p>');
        $('#answer').html("The mass is " + MFA + " kg.");

    } else if (isNaN(A) && !isNaN(F) && !isNaN(M)) {

        var AFM = F/M;
        $('#answer').html("The acceleration is " + AFM + " metres per second squared.");

    } else {

        $('#answer').html("A calculation error has occurred.");

    }

}）;

这是一个小提琴：http://jsfiddle.net/j9a1u23r/

Answer 3

不仅与字符串连接。您需要解析到INT，因此数字类型有效。您也可以使用isNaN函数：

  if (isNaN(F) && !isNaN(M) && !isNaN(A)) {
        var FMA = M*A;
        $('#answer').html("The force is " +FMA +" Newtons.")
    }

    else if (isNaN(M) && !isNaN(F) && !isNaN(A)) {
        var MFA = F/A;
        var $output2 = $('<p>The mass is ?? kg.</p>');
        $('#answer').html("The mass is " +MFA + " kg.")
    }

    else if (isNaN(A) && !isNaN(F) && !isNaN(M)) {
        var AFM = F/M;
        $('#answer').html("The acceleration is " +AFM + " metres per second sqaured.");
    }

    else {
        $('#answer').html("A calculation error has occurred.");
    }

您必须检查是否有任何值为空。我希望能帮到你。

在此测试：http://jsfiddle.net/v95vwrm2/

Answer 4

感谢JS Fiddle代码，它完全符合计划。

当我以同样的方式更改自己的代码时似乎不起作用。 JS Fiddle使用的技巧是否需要包含在我自己的代码中？

使用jQuery更新网页。为什么这段代码不起作用？

4 个答案: