JavaScript表格计算器不工作

我使用JavaScript为表格计算器创建了JSFiddle。JavaScript表格计算器不工作

看着开发者控制台，它看起来像我的功能没有被调用。我不知道为什么。帮帮我？

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; 

}

来源

2017-08-09 Dilip Ramachandran

试试这个：https://jsfiddle.net/9d7fsjcb/9/ –

你不应该给一个表单控件的“提交”名称（或任何其他默认形式属性）。 – RobG

在该函数中添加一个参数，并在那里传递一些内容，以便在该函数的底部使用submit按钮和'return false;'来测试它。 – PHPglue

卸下形式标记，因为这是脚本

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

IDK为什么它不射击，当你明确提出了功能上的HTML，但如果你通过JS添加的功能，它的工作原理。

来源

2017-08-09 01:52:56 Merigold

为什么所有的图书馆都不使用？为什么不能运行一段代码？ – RobG

@RobG idk关于OP。是的图书馆没有使用，但我决定忽略它。 – Merigold

伴侣，只是把你的函数的脚本标签，在这里为您解决，

<script>ur code</script>

https://jsfiddle.net/v327sxgx/ :)

来源

2017-08-09 01:55:01

没有凯文这不是如何你的假设使用小提琴..脚本部分是有原因的。 –

原因喜欢？更多关于这个的细节请:) –

也许你需要尝试使用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; 
});

来源

2017-08-09 01:56:27

JavaScript表格计算器不工作

回答

相关问题