为输入添加值
问题描述:
我正在试图用这个做简单的数学运算。我得到的问题是结果从未显示。为输入添加值
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
<script type="text/javascript" src="script.js"></script>
<title></title>
</head>
<body>
<form>
<input id="data1" type="number" name="data1">
<br>
<input id="data2" type="number" name="data2">
<br>
<input id="button" type="submit">
<br>
<br>
<input id="result" type="number" name="result" value="1">
</form>
</body>
</html>
JS:在这里,我得到了我的变量。等式的结果应显示在#result输入中。
$(document).ready(function(){
var result = 0;
$("#result").val(result);
$("#button").click(function() {
var data1 = $("#data1").val();
var data2 = $("#data2").val();
result = $(data1 * data2);
$("#result").val(result);
});
});
答
在你的下面的代码片段,result
将是一个对象
result = $(data1 * data2);
将其更改为:
result = data1 * data2;
的代码的其余部分看起来不错。正如其他意见所建议的,不要忘记添加电话preventDefault()
$(document).ready(function(){
var result = 0;
$("#result").val(result);
$("#button").click(function(evt) {
evt.preventDefault();
var data1 = $("#data1").val();
var data2 = $("#data2").val();
result = data1 * data2;
$("#result").val(result);
});
});
答
添加防止默认设置来停止提交和重新加载页面。
$(document).ready(function(){
var result = 0;
$("#result").val(result);
$("#button").click(function(evt) {
evt.preventDefault();
var data1 = $("#data1").val();
var data2 = $("#data2").val();
result = $(data1 * data2);
$("#result").val(result);
});
});
答
A form
有一些默认参数。就是这样,即使你没有像你那样传递任何东西。例如,它有一个action
- 默认为您现在正在使用的网站。因此,如果您点击提交按钮,表单会提交(GET
请求 - 这是另一个默认的请求)。不管你传递给它的参数有多少。防止表单执行此操作。您可以使用preventDefault()
方法。
$("#button").click(function(e) {
e.preventDefault();
// ... rest of your code
}
这将从真正提交数据/表格/自动停止您的形式 - 你可以在同一页上JS处理它的值。
这工作!谢谢! – notooanon