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，例如“ myForm”

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());

這將強制該值為浮點數。

Answer 2

如果要在嵌入式js中使用該函數，則需要在全局范圍內聲明該函數

$(document).ready(function() {
    var numberOne = $('#money').val(),
        numberTwo = 4;
    var finalNumber = numberOne + numberTwo;
})
function depositCal() {
    $('.answer').append($('#money').val() + 4);
}

您還可以通過將function附加到window對象來使其成為全局函數。

Answer 3

我認為您不需要$(document).ready並在函數內部進行finalNumber計算，這樣它將為您提供正確的money輸入值，否則您將獲得NaN或空值-

function depositCal() {
    var numberOne = $('#money').val(),
        numberTwo = 4;
    var finalNumber = numberOne + numberTwo;
    $('.answer').append(finalNumber);
}

Answer 4

您必須將depositCal函數定義排除在$(document).ready() ，因為首先加載整個文檔，然后調用$(document).ready()因此，在加載表單時，瀏覽器會發現depositCal為未定義因為它是在文檔完全加載后定義的...因此，將depositCal定義保留在全局范圍內