使用jQuery更新网页.为什么这段代码不能工作?

Using jQuery to update a web page. Why doesn't this code work?

本文关键字：代码 不能 工作 段代码 更新 jQuery 网页 为什么 使用      更新时间：2023-09-26

我正在尝试为一个简单的物理方程构建一个计算器。使用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.");
        }
});

});

您有typeof和连接错误。
(如果你对Infinite results不感兴趣)试试:

$('#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);
});

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

$("#计算")。On ('click'， 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/

不仅与字符串连接。你需要解析为INT，所以typeof number可以工作。你也可以使用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/

感谢JS Fiddle代码，它完全按照计划工作。

当我以同样的方式改变我自己的代码时，它似乎不起作用。有一些技巧，JS小提琴使用我需要包括在我自己的代码?

相关文章：