Question

我在这个基本的JavaScript按揭计算器上遇到了一点麻烦......我还没有实现数学。但是我在提交表单之后在表单下面显示最终总和（x + y + z）时遇到了麻烦（它是客户端的，我只是使用变量的总和来测试它）。此外，重置表单按钮不起作用。有谁能够帮我？谢谢！

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- This is assign05.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> JavaScriptcript Mortgage Calculator </title>
    <script>

    // Pass values into variables
    function myFunction() {
        var x = parseInt(document.getElementById("apr").value);
        var y = parseInt(document.getElementById("loanTerm").value);
        var z = parseInt(document.getElementById("loanAmount").value);
    }

    //Display the total sum
    function display(x, y, z) {
        var num = x + y + z;
        var n = num.toString();
        document.getElementById("total").innerHTML = n;
    }

    // Validate the form
    function validateForm(x, y, z) {
        var x = document.forms["myForm"]["apr"].value;
        var y = document.forms["myForm"]["loanTerm"].value;
        var z = document.forms["myForm"]["loanAmount"].value;

        // If statements
        if (x==null || x=="") {
            alert("APR must be filled out");
            document.getElementById("apr").focus();
            return false;
        }
        else if (y==null || y=="") {
            alert("Loan Term must be filled out");
            document.getElementById("loanTerm").focus()
            return false;
        }
        else if (z==null || z=="") {
            alert("Loan Amount must be filled out");
            document.getElementById("loanAmount").focus()
            return false;
        }
        else {
            // Call and display the sum. (This isn't working)
            document.getElementById("demo").innerHTML = display(x, y, z);
        }

        //Reset the form (this isn't working)
        function resetForm() {
            document.getElementById("myForm").reset();
        }
    </script>
</head>
<body onLoad=document.getElementById("apr").focus();>
    <form name="myForm" action="" onsubmit="return validateForm()" method="post">
        APR: <input type="number" id="apr" value=""><br/>
        Loan Term: <input type="number" id="loanTerm" value=""><br/>
        Loan Amount: <input type="number" id="loanAmount" value=""><br/>

        <button onclick="myFunction()">Calculate Payment Button</button>
        <input type="button" onclick="resetForm()" value="Reset form">
    </form>
</body>
</html>

Answer 1

以下是您发布的代码的一些要点：

您的validateForm功能未正确关闭，导致语法错误
您的html中没有标识为myForm的元素，而您的resetForm函数正在尝试重置此不存在的元素

我稍微修改了您的代码，您可以尝试以下操作：

HTML

<form id="myForm" name="myForm" action="" onsubmit="validateForm(); return false;" method="post">
      APR: <input type="number" id="apr" value=""><br/>
      Loan Term: <input type="number" id="loanTerm" value=""><br/>
            Loan Amount: <input type="number" id="loanAmount" value=""><br/>

      <button onclick="myFunction()">Calculate Payment Button</button>
      <input type="button" onclick="resetForm()" value="Reset form">
</form>
<div id="total"></div>

JS

// Pass values into variables
function myFunction() {
    var x = parseInt(document.getElementById("apr").value);
    var y = parseInt(document.getElementById("loanTerm").value);
    var z = parseInt(document.getElementById("loanAmount").value);
}

//Display the total sum
function display(x, y, z) {
    var num = x + y + z;
    var n = num.toString();
    document.getElementById("total").innerHTML = n;
}

// Validate the form
function validateForm(x, y, z) {
    var x = parseInt(document.forms["myForm"]["apr"].value);
    var y = parseInt(document.forms["myForm"]["loanTerm"].value);
    var z = parseInt(document.forms["myForm"]["loanAmount"].value);

    // If statements
    if (x==null || x=="") {
        alert("APR must be filled out");
        document.getElementById("apr").focus();
        return false;
    }
    else if (y==null || y=="") {
        alert("Loan Term must be filled out");
        document.getElementById("loanTerm").focus()
        return false;
    }
    else if (z==null || z=="") {
        alert("Loan Amount must be filled out");
        document.getElementById("loanAmount").focus()
        return false;
    }
    else {

    // Call and display the sum. (This isn't working)
    display(x, y, z);
        //document.getElementById("demo").innerHTML = display(x, y, z);
    }
    return false;
}

//Reset the form (this isn't working)
function resetForm() {
    document.getElementById("myForm").reset();
}

Answer 2

String（num）比123.toString（）
您没有从display（）返回任何内容，但您正在使用返回值。
您的x，y和z是字符串，但我建议在进行数学运算之前将它们转换为数字。
＆LT;表格名称=＆＃34; myForm＆＃34;应该说＆lt;表格id =＆＃34; myForm＆＃34;

Answer 3

关于重置按钮，您基本上可以将其设为按钮。就这样：

<button>Reset form</button>

当您点击它时，所有表单的内容都将消失。

Answer 4

您没有使用任何ID，使用id="myForm"，然后重置按钮将完美运行。
正确关闭验证功能。
您没有添加任何显示结果的地方。

Answer 5

您的代码存在某些问题。我先说一下：

validateForm功能未正确关闭。它应该是这样的：

function validateForm(x, y, z) {
    var x = document.forms["myForm"]["apr"].value;
    var y = document.forms["myForm"]["loanTerm"].value;
    var z = document.forms["myForm"]["loanAmount"].value;

    // If statements
    if (x==null || x=="") {
        alert("APR must be filled out");
        document.getElementById("apr").focus();
        return false;
    }
    else if (y==null || y=="") {
        alert("Loan Term must be filled out");
        document.getElementById("loanTerm").focus()
        return false;
    }
    else if (z==null || z=="") {
        alert("Loan Amount must be filled out");
        document.getElementById("loanAmount").focus()
        return false;
    }
    else {
        // Call and display the sum. (This isn't working)
        document.getElementById("demo").innerHTML = display(x, y, z);
    }
} //end of function definition

您将输入值作为字符串传递给显示功能。您需要在validateForm方法中将它们解析为整数。
在resetForm方法中，您可以通过document.getElementById("myForm")来引用表单。但是，form元素没有id。
您可以完全取消您在＆＃34; CalculatePayment＆＃34;时调用的myFunction()单击按钮并在那里调用validateForm方法。
div没有id＆＃34;演示＆＃34;或＆＃34;总计＆＃34;你似乎写的。并且您明确地在display函数中写入一个div，然后再次执行此操作：
```
 document.getElementById("demo").innerHTML = display(x, y, z); 
 //display function already writes to a div. This is redundant
```

考虑到所有这些指示，我创建了一个简单的JSFiddle，它看起来像您想要的一样，只需对代码进行最少的修改，当然还有一些整理。希望它能让你开始朝着正确的方向前进。

Answer 6

从您的代码中，我意识到您想在空div中显示x，y，z的总数，并在html代码的末尾显示一个总数的ID，为什么不使用textContent而不是innerHTML来显示结果此外，您的按钮不是提交类型。我的意思是表单内的按钮。请注意，在使按钮提交类型时，必须使用preventDefault（event）的内置javascript函数；在顶部。

基本的JavaScript计算器

6 个答案:

HTML

JS