javascript - 使用javascript/html根据文本框值计算数据

Question

我正在尝试从 3 个 html 文本字段中获取值，并将它们加在一起以获得用户单击按钮时的总值。我是 javascript 的新手，在网上研究之后，我找到了一个示例代码并实现了我的代码，但它没有显示任何值。这是我的代码:

 <form name="selectVehicleForm" action="SelectVehicle">
            Car Make: <input type="text" name="make" id="make" value="${Vehicles.make}" disabled> <br>
            Car Model: <input type="text" name="model" id="model" value="${Vehicles.model}" disabled> <br>
            Car Year: <input type="text" name="year" id="year" value="${Vehicles.year}" disabled> <br>
            Car Transmission: <input type="text" name="transmission" id="transmission" value="${Vehicles.transimssion}" disabled> <br>
            Car Rate Per Mile: <input type="text" name="rpm" id="rpm" value="${Vehicles.ratePerMile}" disabled> <br>
            Car Rate: <input type="text" name="rpd" id="rpd" value="${Vehicles.ratePerDay}" disabled> <br>
            <%
                int id = (Integer) request.getAttribute("id");
            %>
            <input type="hidden" name="id" value="<%=id%>">

            Pick Up Date: <input type="date" name="pickUpDate"> <br>
            Return Date: <input type="date" name="returnDate"> <br>
            Total Miles: <input type="text" name="totalMile" id="totalMile" placeholder="approximate"> <br> <br>

            <script>
                function totalDue(){
                    var rpm = document.getElementById("rpm").value;
                    var rpd = document.getElementById("rpd").value;
                    var totalMiles = document.getElementById("totalMile").value;

                    var totalDue = (rpm * totalMiles) + rpd;
                    document.getElementById("totalDue").innerHTML = totalDue;
                }
            </script>

            <br>Total Amount Due: <input type="text" name="totalDue" id="totalDue"> <br>
        </form>

            <button id="showPaymentForm" onclick="totalDue()">Billing/Payment Info</button>

Answer 1

在您的情况下，您需要设置字段的值而不是 innerHTML。请引用这里的 fiddle :https://jsfiddle.net/jhf18hsr/1/

我已将解析为整数值，当从输入控件读取值时，您可以根据需要将其更改为 float 。

function totalDue(){
  var rpm = parseInt(document.getElementById("rpm").value) || 0;
  var rpd = parseInt(document.getElementById("rpd").value) || 0;
  var totalMiles = parseInt(document.getElementById("totalMile").value) || 0;

  var totalDue = (rpm * totalMiles) + rpd;
  document.getElementById("totalDue").value = totalDue;
}