Javascript 如何检索输入框中的值以用于函数？_Javascript_Html_Forms

Javascript 如何检索输入框中的值以用于函数？

javascript html forms

Javascript 如何检索输入框中的值以用于函数？,javascript,html,forms,Javascript,Html,Forms,我试图从html中的几个输入框中获取值，并在另一个in输入元素中返回值如果我用我想要的信息硬编码var，它会正确地返回一个值我的代码如下所示： <html> <head> <title>Compounding interest in javascript</title> </head> <body> <script type="text/javascript">

我试图从html中的几个输入框中获取值，并在另一个in输入元素中返回值

如果我用我想要的信息硬编码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>


javascript中的复利
var项=0；
var利息=0；
var贡献=0；
var余额=0；
函数calcValue（）{
期限=document.getElementById（“numOfMonths”）；
利息=（document.getElementById（“interestRate”）/100）/12；
贡献=document.getElementById（“amountPerMonth”）；
对于（i=0；i您需要使用.value
来获取输入字段的内容。您应该使用Number（）
将字符串输入转换为数字（如果您想指定要将其转换为什么类型的数字，也可以使用parseInt（）
或parseFloat（）
）
没有理由每次通过循环都将结果放入输出字段，只需在最后执行一次即可
每次调用该函数时，都应将余额
初始化为零。否则，您将向上一个余额中添加供款
另一个问题是您有
和
。ID应该在
中

函数calcValue（）{
var余额=0；
var term=数字（document.getElementById（“numOfMonths”）.value）；
var利息=编号（document.getElementById（“interestRate”）.value）/100/12；
var贡献=数字（document.getElementById（“amountPerMonth”）.value）；
对于（i=0；i<（术语+1）；i++）{
余额=（余额+供款）*（1+利息）；
}
var四舍五入=数学四舍五入（余额*100）/100；
document.getElementById（“finalValue”）.value=四舍五入；
}

输入每月要预留的金额
输入计划提款前的月数
输入您的利率
这些是您的代码中的一些问题
document.getElementById（“id”）将获取DOM元素。要获取值，需要使用document.getElementById（“id”）.value
需要在输入元素而不是h3上设置“id”属性，因为您正在访问document.getElementById（“amountPerMonth”）。value和“value”属性适用于输入和非标题等元素
document.getElementById是一个javascript函数，您需要传递一个字符串作为属性。传递“#id”将查找id为“#id”的an元素。您似乎将jQuery与javascript混淆在一起。在jQuery中，它将是$（“#id”）
在for循环中，您有（term+1），其中term实际上是一个字符串。因此，字符串后面会附加“1”，导致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>


javascript中的复利
var期限=0，利息=0，贡献=0，余额=0；
函数calcValue（）{
var四舍五入；
term=parseInt（document.getElementById（“numOfMonths”）.value，10）；
利息=（parseFloat（document.getElementById（“interestRate”）.value，10）/100）/12；
贡献=parseFloat（document.getElementById（“amountPerMonth”）.value，10）；
对于（i=0；i，以下是您问题的解决方案：
HTML:

输入每月要预留的金额



输入计划提款前的月数



输入您的利率







jQuery：
var term = 0;
var interest = 0; 
var contribution = 0; 
var balance = 0;
var i=0;
var rounded=0;

$('#calcButton').click(function(){
term = parseInt($("#numOfMonths").val());
    interest = (parseInt($("#interestRate").val())/100) / 12;
    contribution = parseInt($("#amountPerMonth").val());

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

            var rounded = Math.round( balance * 100 ) / 100;
            $("#finalValue").val(rounded);
    }
});

var项=0；
var利息=0；
var贡献=0；
var余额=0；
var i=0；
var四舍五入=0；
$（'#calcButton'）。单击（函数（）{
term=parseInt（$（“#nummonths”）.val（）；
利息=（parseInt（$（“#interestRate”）.val（））/100）/12；
贡献=parseInt（$（“#amountPerMonth”）.val（）；
对于（i=0；i，代码中有一些地方可以改进-
    <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>

在特定方法中使用的变量应该在方法中声明
getElementById（“id”）返回DOM对象，所以您应该使用“.value”来获取文本框的值
您应该使用
框来编写id=“amountPerMonth”和id=“interestRate”，而不是使用
框来编写，这样您就可以从中获取值。Other wise document.getElementById将不起作用
一旦获得了balance的最终值，就可以在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>


javascript中的复利
函数calcValue（）{
var余额=0；
var term=document.getElementById（“numOfMonths”）.value；
var利息=（document.getElementById（“interestRate”）.value/100）/12；
var贡献=document.getElementById（“amountPerMonth”）.value；
对于（i=0；i<（术语+1）；i++）{
余额=（余额+供款）*（1+利息）；
}
var四舍五入=数学四舍五入（平衡）；
document.getElementById（“finalValue”）.value=四舍五入；
}
输入每月要预留的金额
输入计划提款前的月数
输入您的利率
谢谢你的回答。但是我仍然收到一个错误。我复制并粘贴了你的代码，所有语法看起来都很好。错误是TypeError：无法将属性“value”设置为null。我还认为会有一个公式来计算。我正在尝试学习javascript，并认为这将是一个简单的开始。谢谢，希望如此您可以回答此问题。上次调用getElementById
时，在ID之前有
。删除了#。现在，值返回到最后一个框中，如下所示：