[英]Javascript function not defined in jQuery
I have problems with a simple bit of code. 我有一些简单的代码问题。 I'm trying to take a value from an input field and then do a simple calculation.
我正在尝试从输入字段中获取一个值,然后进行简单的计算。 The calculation is supposed to take place with an
onSubmit
command and then append it to a p
tag. 该计算应使用
onSubmit
命令进行,然后将其附加到p
标签。
HTML: 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: Javascript:
$(document).ready(function() {
var numberOne = $('#money').val(),
numberTwo = 4;
var finalNumber = numberOne + numberTwo;
function depositCal() {
$('.answer').append(finalNumber);
}
})
I get back function not defined when it runs. 当它运行时,我得到未定义的函数。
I know this is probably very simple but any help would be greatly appreciate. 我知道这可能很简单,但是任何帮助将不胜感激。
Try this: 尝试这个:
Give your form a name and ID eg 'myForm' 给您的表单一个名称和ID,例如“ myForm”
JS JS
$('#myForm').submit(function(e){
e.preventDefault();
var numberOne = $('#money').val();
var numberTwo = 4;
var finalNumber = numberOne + numberTwo;
$('.answer').append(finalNumber);
});
e.preventDefault() - stops the form from submitting (thus refreshing the page) and the function is only fired when submit is clicked. e.preventDefault()-停止提交表单(从而刷新页面),并且仅在单击提交时才触发该功能。
Addition 加成
numberOne is getting it's value from a form field so it sees it as a string. numberOne正在从表单字段获取其值,因此它将其视为字符串。 To prevent this use this line instead:
为了防止这种情况,请改用以下行:
var numberOne = parseFloat($('#money').val());
Which forces the value to be a (float) number. 这将强制该值为浮点数。
You need to declare the function in global scope if you want to use it in inline js 如果要在嵌入式js中使用该函数,则需要在全局范围内声明该函数
$(document).ready(function() {
var numberOne = $('#money').val(),
numberTwo = 4;
var finalNumber = numberOne + numberTwo;
})
function depositCal() {
$('.answer').append($('#money').val() + 4);
}
You could also make it a global function by attaching the function
to window
object. 您还可以通过将
function
附加到window
对象来使其成为全局函数。
I think you don't need $(document).ready
here and do calculation of finalNumber
inside function so that it will give you the correct value of money
input, otherwise you will get NaN
or empty value- 我认为您不需要
$(document).ready
并在函数内部进行finalNumber
计算,这样它将为您提供正确的money
输入值,否则您将获得NaN
或空值-
function depositCal() {
var numberOne = $('#money').val(),
numberTwo = 4;
var finalNumber = numberOne + numberTwo;
$('.answer').append(finalNumber);
}
您必须将depositCal函数定义排除在$(document).ready()
,因为首先加载整个文档,然后调用$(document).ready()
因此,在加载表单时,浏览器会发现depositCal为未定义因为它是在文档完全加载后定义的...因此,将depositCal定义保留在全局范围内
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.