如何创建简单的总价格？

由于标题说我需要创建一个简单的总价格函数。我需要将人数乘以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

如何创建简单的总价格？

回答

相关问题