正如标题所说，我需要创建一个简单的总价函数。我需要将人数乘以 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>
最佳答案
您需要调用函数来显示总价。将更改事件添加到您的输入以调用函数。
<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>
关于javascript - 如何创建简单的总价？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10828670/