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。请参考此处的小提琴：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;
}

Answer 2

首先我们在rpm和rpd中加入一些值，比如3和40.现在让我们这样做：

Car Rate Per Mile: <input type="text" name="rpm" id="rpm" value="3"> <br>

或者您可以根据需要删除默认值：

Car Rate Per Mile: <input type="text" name="rpm" id="rpm"> <br>

rpd相同。在将来你可能想要从数据库或其他东西加载这些值，它会很棒，因为你说你是JS的新手，也许你会稍后尝试php，但今天不是这样;在此期间删除＆＃34;禁用＆＃34;部分并每次输入您想要的值。

其次，在数学中添加一个parseFloat，所以js将你的rpm和rpd值视为数字而不是文本;与parseInt相比，parseFloat允许您使用和显示一些小数。

var totalDue = (parseFloat(rpm) * parseFloat(totalMiles)) + parseFloat(rpd);

第三，更改document.getElementById("totalDue").innerHTML = totalDue;的{{1}}。这样，您将在onClick上填充输出文本框。

然而，这并没有将日期集成到等式中，你必须更多地完善你的JS函数来实现这一目标。

在输出文本框行中，我会添加禁用功能，因为我不想在此框中书写，只显示结果：

document.getElementById("totalDue").value=totalDue;

希望这有帮助。

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

2 个答案: