Question

我使用JavaScript为表单计算器创建了一个JSFiddle。

查看开发人员控制台，看起来我的函数没有被调用。我不知道为什么。帮助

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;

}

Answer 1

删除表单标记，因为这是脚本化的

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

然后是脚本示例

previewProvider

Idk为什么当你明确地将这个函数放在html上时它没有触发，但如果你通过JS添加这个函数就行了。

Answer 2

配合，只需将你的功能放在脚本标签中，在这里为你修好，

<script>ur code</script>

https://jsfiddle.net/v327sxgx/ ：）

Answer 3

也许您需要尝试使用jQuery进行点击事件的不同方法

$("#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表单计算器不起作用

3 个答案: