JavaScript表单计算器不起作用
[英]JavaScript Form Calculator Not Working
问题描述
我使用JavaScript为表单计算器创建了JSFiddle。
看着开发者控制台，好像我的函数没有被调用。 我不知道为什么。 救命？
https://jsfiddle.net/9d7fsjcb/6/
的HTML
<body>
<div data-role="page">
<div data-role="header">
<h1>Marqeta Volume Calculator</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="test.php">
<label for="points">Monthly Transactions per Card</label>
<input type="range" name="trx" id="trx" value="25" min="1" max="175" onchange="volumeCalc()"/>
<label for="points">Monthly Active Cards</label>
<input type="range" name="cards" id="cards" value="350" min="1" max="1000" onchange="volumeCalc()"/>
<label for="points">Average Transaction Amount ($)</label>
<input type="range" name="amt" id="amt" value="12" min="1" max="1000" onchange="volumeCalc()"/>
<input type="submit" name="submit" id="submit" value="Submit" onclick="volumeCalc()"/>
<label for="points">Predicted Volume ($)</label>
<input type="number" name="total" id="total" readonly=true>
<div id="totVolume1"></div>
</form>
</div>
</div>
</body>
JAVASCRIPT
function volumeCalc() {
var trx = document.getElementById('trx').value;
var cards = document.getElementById('cards').value;
var amt = document.getElementById('amt').value;
var volume = parseInt(trx, 10) + parseInt(cards, 10) + parseInt(amt, 10);
document.getElementById('totVolume1').innerHTML = volume;
document.getElementById('total').value = volume;
}
3 个解决方案
解决方案1
0 2017-08-09 01:52:56
删除表单标签，因为它已编写脚本
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<body>
<div data-role="page">
<div data-role="header">
<h1>Marqeta Volume Calculator</h1>
</div>
<div data-role="main" class="ui-content">
<label for="points">Monthly Transactions per Card</label>
<input type="range" name="trx" id="trx" value="25" min="1" max="175" onchange="volumeCalc()"/>
<label for="points">Monthly Active Cards</label>
<input type="range" name="cards" id="cards" value="350" min="1" max="1000" onchange="volumeCalc()"/>
<label for="points">Average Transaction Amount ($)</label>
<input type="range" name="amt" id="amt" value="12" min="1" max="1000" onchange="volumeCalc()"/>
<input type="submit" name="submit" id="submit" value="Submit" onclick="volumeCalc()"/>
<label for="points">Predicted Volume ($)</label>
<input type="number" name="total" id="total" readonly=true>
<div id="totVolume1"></div>
</div>
</div>
</body>
然后这是一个脚本示例
function volumeCalc() {
('called');
var trx = document.getElementById('trx').value;
var cards = document.getElementById('cards').value;
var amt = document.getElementById('amt').value;
var volume = parseInt(trx, 10) + parseInt(cards, 10) + parseInt(amt, 10);
document.getElementById('totVolume1').innerHTML = volume;
document.getElementById('total').value = volume;
}
document.getElementById('submit').onclick = function(){ volumeCalc(); };
当您将函数显式放在html上时，为什么它不触发，但是如果您通过JS添加函数，它就会起作用。
解决方案2
0 2017-08-09 01:55:01
解决方案3
0 2017-08-09 01:56:27
也许您需要尝试将jQuery用于Click事件的另一种方法
$("#submit").click(function() {
var trx = document.getElementById('trx').value;
var cards = document.getElementById('cards').value;
var amt = document.getElementById('amt').value;
var volume = parseInt(trx, 10) + parseInt(cards, 10) + parseInt(amt, 10);
document.getElementById('totVolume1').innerHTML = volume;
document.getElementById('total').value = volume;
});
卡路里计算器Javascript表格
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.