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表格計算器不工作

回答

相關問題