Question

我正在尝试制作一个基本的投资回报率计算器，并且无法使任何类型的数学函数起作用。我只需要两个用户变量输入，并希望我的编码通过一个简单的数学方程并发布答案。一旦我可以将我的两个输入变量至少相互相乘，数学公式就会改变。

点击提交后，不会给出输出并重置输入字段。单击重置会清除字段。我希望输入（#output）显示答案。

此时我不关心CSS或最终公式。

HTML类型：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="calculator.js" type="text/javascript"></script>
    <title>Calculator</title>
</head>

<body>
    <form id="calculator">
        <input type="text" id="Occupancy" name="occupancy">
        <input type="text" id="rooms" name="rooms">
        <button id="submit" type="submit" name="submit">Submit</button>
        <button id="reset" type="reset" name="reset">Reset</button>
        <input type="text" id="output" name="output">
    </form>
</body>
</html>

以下JavaScript代码：

// JavaScript Document
$(document).ready(function() {
    $('#calculator').submit(function() {
        var occupancy = $('#Occupancy').val();
        var rooms = $('#rooms').val();
        var output =occupancy * rooms;
        output = output.toFixed(2);
        $('#output').val(output);
    });
});

Answer 1

你的脚本运行正常。会发生什么，脚本运行并计算结果。但随后，表单将提交给服务器并重新加载页面。

为防止出现这种情况，您必须禁止表单提交到服务器

$('#calculator').submit(function(evt) {
    evt.preventDefault();
    var occupancy = $('#Occupancy').val();
    var rooms = $('#rooms').val();
    var output = occupancy * rooms;
    output = output.toFixed(2);
    $('#output').val(output);
});

请参阅JSFiddle

Answer 2

尝试改变

var occupancy = $('#Occupancy').val();

到var occupancy = parseFloat($('#Occupancy').val());

和var rooms = $('#rooms').val();

到var rooms = parseFloat$('#rooms').val());

Answer 3

如果没有要求提交表格：

$('#calculateButton').click(function() {
  var occupancy = $('#Occupancy').val();
  var rooms = $('#rooms').val();
  var output = +occupancy * +rooms;

  $('#output').val(output.toFixed(2));
});

Answer 4

试试这个：

// JavaScript Document
$(document).ready(function() {
    $('#submit').click(function() {
        var occupancy = $('#Occupancy').val();
        var rooms = $('#rooms').val();
        var output =occupancy * rooms;
        output = output.toFixed(2);
        $('#output').val(output);
    });
});

将两个输入变量乘以jscript

4 个答案: