jQuery 中未定义 Javascript 函数

Question

我在使用一段简单的代码时遇到问题。我试图从输入字段中获取一个值，然后进行简单的计算。计算应该通过 onSubmit 命令进行，然后将其附加到 p 标记。

HTML:

<h1 class="titleHead">Calculator</h1>

<form method="POST" action="#" onSubmit="depositCal()">
  <input type="text" name="money" id="money">
  <input type="submit" value="How much" onSubmit="">
</form>

<div>
  <p class="answer"></p>
</div>

Javascript:

$(document).ready(function() {
    var numberOne = $('#money').val(),
    numberTwo = 4;

    var finalNumber = numberOne + numberTwo;
    function depositCal() {
        $('.answer').append(finalNumber);
     }
})

运行时我得到函数未定义的信息。

我知道这可能非常简单，但我们将不胜感激。

Answer 1

试试这个:

为您的表单提供名称和 ID，例如'我的表格'

JS

$('#myForm').submit(function(e){
     e.preventDefault();
     var numberOne = $('#money').val();
     var numberTwo = 4;
     var finalNumber = numberOne + numberTwo;
     $('.answer').append(finalNumber);
});

e.preventDefault() - 阻止表单提交(从而刷新页面)，并且该函数仅在单击提交时触发。

添加

numberOne 正在从表单字段获取其值，因此它将其视为字符串。为了防止这种情况，请改用这一行:

var numberOne = parseFloat($('#money').val());

这强制该值成为(浮点)数字。