如何創建簡單的總價格？

由於標題說我需要創建一個簡單的總價格函數。我需要將人數乘以1000，並在「totalPrice」中顯示。任何javascript/html/jquery都很棒。我有這個到目前爲止：如何創建簡單的總價格？

<html> 
<body> 
    <form id="buyTicket" method="post"> 
     <div> 
      Booking Name : <input type="text" required id="bookingName" placeholder="booking name" /> 
     </div> 
     <div> 
      Number of persons : <input type="number" required id="numberOP" placeholder="number of persons"/> 
     </div> 
     <div> 
      Depature : <input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/> 
     </div> 
     <div> 
      Return   : 
      <input type="text" required id="return" class="datepicker" placeholder="enter return date"/> 
     </div> 
     <div id="totalPrice">Total:</div> 
     <div> 
      <button type="submit" id="buttonTicket">Buy Ticket</button> 
     </div> 
    </form> 
    <script type="text/javascript"> 
     function CalculateTotal() { 
      var numberOP = document.getElementById('numberOP').value; 
      var total = numberOP * 1000;      
      document.getElementById('totalPrice').innerHTML = total; 
     } 
    </script> 
</body> 
</html>

來源

2012-05-31 needhelp

請說明您的問題。什麼是問題？什麼不行？ – tibo

你想實現什麼？目前的解決方案有問題嗎？ –

是的，我看不到總價。我想看到它，它不工作。 – needhelp

你需要調用你的函數來顯示總價格。將更改事件添加到您的輸入以調用函數。

<div>Number of persons :<input type="number" required id="numberOP" onchange="CalculateTotal()" placeholder="number of persons"/></div>

全碼：

<html><body> 
    <form id="buyTicket" method="post"> 
     <div>Booking Name  :<input type="text" required id="bookingName" placeholder="booking name" /></div> 
     <div>Number of persons :<input type="number" required id="numberOP" onchange="CalculateTotal()" placeholder="number of persons"/></div> 
     <div>Depature   :<input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/></div> 
     <div>Return   :<input type="text" required id="return" class="datepicker" placeholder="enter return date"/></div> 
     <div id="totalPrice">Total:</div> 
     <input type="hidden" id="total" /> <!-- BAD IDEA --> 
     <div><button type="submit" id="buttonTicket">Buy Ticket</button></div> 
    </form> 

    <script type="text/javascript"> 
     function CalculateTotal() { 
     var numberOP = document.getElementById('numberOP').value; 
     var total = numberOP * 1000;      
     document.getElementById('totalPrice').innerHTML = 'Total: ' + total; 
     document.getElementById('total').value = total; //<--BAD IDEA 
     } 
    </script> 
</body></html>

來源

2012-05-31 06:54:02

是的，工作！謝謝謝謝！雖然我有另一個問題，當我點擊提交所有我的價值附加到一個股利。但總沒有。我是否可以在另一個問題上提出這個問題，或者我可以在這裏問你？ – needhelp

當您點擊提交時，總計不會發回;爲了將其發送回帖子，您需要將其包含在「輸入」中或其他內容中。 –

就這樣啊？

Total:

– needhelp

嘗試parseInt函數來獲得字符串的號碼來代替。

function CalculateTotal() 
{ 
     var numberOP = parseInt("0" + document.getElementById('numberOP').value); 
     var total = numberOP * 1000;      
     document.getElementById('totalPrice').innerHTML = total; 
} 

//Call above method 
CalculateTotal();

你可以叫上提交按鈕這種方法只是爲了檢查是否正常工作

<button type="submit" id="buttonTicket" onclick="CalculateTotal();" >Buy Ticket</button>

來源

2012-05-31 06:54:05 Adil

nope :(沒有工作，我是否在代碼中缺少其他任何東西？ – needhelp

您是否像CalculateTotal（）這樣調用了此方法？ – Adil

我不認爲你需要在你的情況下使用的形式。你只想顯示總價。試試這個：

<html> 
<body> 
    <div> 
     Booking Name : <input type="text" required id="bookingName" placeholder="booking name" /> 
    </div> 
    <div> 
     Number of persons : <input type="number" required id="numberOP" placeholder="number of persons"/> 
    </div> 
    <div> 
     Depature : <input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/> 
    </div> 
    <div> 
     Return   : 
     <input type="text" required id="return" class="datepicker" placeholder="enter return date"/> 
    </div> 
    <div id="totalPrice">Total:</div> 
    <div> 
     <button type="submit" id="buttonTicket" onlick="CalculateTotal();">Buy Ticket</button> 
    </div> 
<script type="text/javascript"> 
    function CalculateTotal() { 
     var numberOP = document.getElementById('numberOP').value; 
     var total = numberOP * 1000;      
     document.getElementById('totalPrice').innerHTML = total; 
    } 
</script> 
</body> 
</html>

來源

2012-05-31 07:03:20

Knockout.js是專爲這樣的一種情況，見Knockout Home

來源

2012-05-31 07:08:13 Dean

如何創建簡單的總價格？

回答

相關問題