[英]jquery mobile javascript calculator
我对javascript非常陌生,我正在尝试使用Jquery Mobile构建一个移动应用程序。 我希望用户在每页上输入一个值,然后在最后一页上,他们将单击“提交”,它将在最后一页上显示该值。 我已经进行了大约4个小时的工作,我可以将计算结果与“提交”按钮放在同一页面上,但不能在下一页上使用。
<script>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = (result);}}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
<input id="btnAdd" type="submit" value="Submit" onclick="sum();" data-theme="b" />
<span id="showResult"></span>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
您需要将该值传递给提交表单的页面
// page1
<form action="page2" method="post">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit" />
</form>
因此,在另一页中,您可以同时使用它们和
// page2
<input type="hidden" name="value1" value="value from page 1"/>
<input type="hidden" name="value2" value="other value from page 1"/>
要用jQuery做到这一点,你可以做
var val1 = jQuery('input[name=value1]');
var val2 = jQuery('input[name=value2]');
请尝试以下代码,它将在最后一页显示结果。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = "Result is: "+(result);}
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a href="#page3" data-role="button" data-theme="b" data-transirion="slidefade" onclick="sum();">B</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.