Question

我正在尝试从我的html中的几个输入框中获取值，并在input元素中返回另一个内部的值。

如果我用我想要的信息对var进行硬编码，它确实会正确返回一个值。

我的代码如下所示：

<html>  
    <head>
    <title>Compounding interest in javascript</title>
    </head>
    <body>
    <script type="text/javascript">
    var term = 0;
    var interest = 0; 
    var contribution = 0; 
    var balance = 0;

    function calcValue(){

        term = document.getElementById("numOfMonths");
        interest = (document.getElementById("interestRate")/100) / 12;
        contribution = document.getElementById("amountPerMonth");

        for (i=0;i<(term+1);i++){
            balance = (balance + contribution) * (1 + interest);

                var rounded = Math.round( balance * 100 ) / 100;
                document.getElementById("#finalValue").value = rounded;
        }
    }


    </script>
    <form>
        <h3  id="amountPerMonth">Enter Amount You Would Like To Set Aside Per Month</h3>
        <input type="text">
        <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
        <input type="text" id="numOfMonths">
        <h3 id="interestRate">Enter Your Interest Rate</h3>
        <input type="text">
        <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()">
        <input type="text" id="finalValue">
    </form>
    </body>
    </html>

感谢您的帮助！

Answer 1

您需要使用.value来获取输入字段的内容。您应该使用Number()将字符串输入转换为数字（如果要指定要将其转换为的数字类型，也可以使用parseInt()或parseFloat()。

并且没有理由每次通过循环将结果放入输出字段，只需在结束时执行一次。

每次调用函数时，都应将balance初始化为零。否则，您将把贡献添加到之前的余额中。

另一个问题是您有<h3 id="amountPerMonth">和<h3 id="interestRate">。该ID应位于<input>。

中

＆＃13;

function calcValue() {
  var balance = 0;
  var term = Number(document.getElementById("numOfMonths").value);
  var interest = Number(document.getElementById("interestRate").value) / 100 / 12;
  var contribution = Number(document.getElementById("amountPerMonth").value);

  for (i = 0; i < (term + 1); i++) {
    balance = (balance + contribution) * (1 + interest);
  }
  var rounded = Math.round(balance * 100) / 100;
  document.getElementById("finalValue").value = rounded;
}

＆＃13;

<form>
  <h3>Enter Amount You Would Like To Set Aside Per Month</h3>
  <input type="text" id="amountPerMonth">
  <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
  <input type="text" id="numOfMonths">
  <h3>Enter Your Interest Rate</h3>
  <input type="text" id="interestRate">
  <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()">
  <input type="text" id="finalValue">
</form>

＆＃13;

顺便说一下，你知道有一个计算复合兴趣的公式，你不需要使用循环，对吧？见Wikipedia

Answer 2

这些是您的代码的几个问题。

document.getElementById（＆＃34; id＆＃34;）将获取DOM元素。要获取该值，您需要使用document.getElementById（＆＃34; id＆＃34;）。value
＆＃34; id＆＃34;需要在输入元素而不是h3上设置属性，因为您正在访问document.getElementById（＆＃34; amountPerMonth＆＃34;）。value和＆＃34; value＆＃34;属性适用于输入而不是标题等元素。
document.getElementById是一个javascript函数，您需要传递一个字符串作为属性。传递＆＃34; #id＆＃34;将查找id为＆＃34; #id＆＃34;的元素。你似乎在这里混淆jQuery和Javascript。在jQuery中，它将是$（＆＃34;＃id＆＃34;）。
在for循环中，你有（term + 1）其中term实际上是一个字符串。所以＆＃34; 1＆＃34;将被附加到字符串，导致for循环运行不正确的次数。因此需要正确使用parseInt和parseFloat。

完成这些更改后，您的程序应按预期工作。

这是更正后的代码。

<html>  
<head>
<title>Compounding interest in javascript</title>
</head>
<body>
<script type="text/javascript">
var term = 0, interest = 0, contribution = 0, balance = 0;

function calcValue(){
    var rounded;
    term = parseInt(document.getElementById("numOfMonths").value, 10);
    interest = (parseFloat(document.getElementById("interestRate").value, 10)/100) / 12;
    contribution = parseFloat(document.getElementById("amountPerMonth").value, 10);

    for (i=0;i<(term+1);i++){
        balance = (balance + contribution) * (1 + interest);

            rounded = Math.round( balance * 100 ) / 100;                
    }
    document.getElementById("finalValue").value = rounded; 
}


</script>
<form>
    <h3>Enter Amount You Would Like To Set Aside Per Month</h3>
    <input type="text" id="amountPerMonth">
    <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
    <input type="text" id="numOfMonths">
    <h3>Enter Your Interest Rate</h3>
    <input type="text" id="interestRate">
    <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()">
    <input type="text" id="finalValue">
</form>
</body>
</html>

Answer 3

以下是您的问题的解决方案： HTML：

library(XML)
url <- "http://www.rcsb.org/pdb/home/home.do"
doc <- htmlTreeParse(url, useInternalNodes = TRUE)
xp <- xpathApply(doc, "//*/div[@id='navbar-collapse-RCSB']/ul/li")

jQuery的：

<form>
<label for="amountPerMonth">Enter Amount You Would Like To Set Aside Per Month</label>
    <input type="text" name="amountPerMonth" id="amountPerMonth"/>
    <br/><br/>
    <label for="numOfMonths">Enter The Number Of Months Before You Plan To Withdraw</label>
    <input type="text" name="numOfMonths" id="numOfMonths"/><br/><br/>
    <label for="interestRate">Enter Your Interest Rate</label>
    <input type="text" name="interestRate" id="interestRate"/><br/><br/>
    <input type="button" id="calcButton" value="Calculate"/>
    <br/><br/>
    <input type="text" name="finalValue" id="finalValue"/>
</form>

这是一个小提琴：

https://jsfiddle.net/2cg2kncn/

Answer 4

您可以在代码中改进一些内容 -

您在特定方法中使用的变量应该在方法内声明。
document.getElementById（＆＃34; id＆＃34;）返回DOM对象，因此您应该使用＆＃34; .value＆＃39;获取文本框的值。
而不是写入id =＆＃34; amountPerMonth＆＃34;和id =＆＃34; interestRate＆＃34;使用<h3>时，您应该使用<input>框进行编写，以便从中获取价值。其他明智的document.getElementById将不起作用。
获得余额的最终值后，您可以将其分配到for循环之外。

以下是代码的解决方案 -

    <html>
    <head>
    <title>Compounding interest in javascript</title>
    <script type="text/javascript">
    function calcValue() {
    var balance = 0;
    var term = document.getElementById("numOfMonths").value;
    var interest = (document.getElementById("interestRate").value / 100) / 12;
    var contribution = document.getElementById("amountPerMonth").value;

    for (i = 0; i < (term + 1); i++) {
    balance = (balance + contribution) * (1 + interest);
    }
    var rounded = Math.round(balance);
    document.getElementById("finalValue").value = rounded;
    }
    </script>
    </head>
    <body>
    <form>
    <h3>Enter Amount You Would Like To Set Aside Per Month</h3>
    <input type="text" id="amountPerMonth">
    <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
    <input type="text" id="numOfMonths">
    <h3>Enter Your Interest Rate</h3>
    <input type="text" id="interestRate">
    <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()"> 
    <input type="text" id="finalValue">
    </form>
    </body>
    </html>

如何检索输入框中的值以与我的函数一起使用？

4 个答案: