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

标签 javascript jquery html

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

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 结果不感兴趣) 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);
});

关于javascript - 使用 jQuery 更新网页。为什么这段代码不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25324995/

相关文章:

php - 在 Bootstrap 多选中保留默认选定值

android - 启用 :hover effect on a touch screen environment

javascript - 将按 ASCII 顺序排序的一维数组转换为 Javascript 中的嵌套数组

javascript - 为什么模糊事件不会在文本区域上 react ?

jquery - 如何在点击输入时更改提交按钮

html - 如何使用 Bootstrap 3 将 Wordpress 主题的幻灯片分成两部分?

iphone - 具有宽 iframe 的网页在具有视口(viewport)的 iPhone 上不可滚动

javascript - 在另一个页面中包含 canvasJS 图表

javascript - Jquery 可拖动不工作 2

javascript - 在 jQuery 按键事件上获取输入文本值