javascript - 基本的JavaScript计算器

我在使用此基本的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>

最佳答案

您的代码存在某些问题。我将首先提及它们：

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。
当单击“ CalculatePayment”按钮时，您可以完全取消调用的myFunction()，然后在该位置调用validateForm方法。
您似乎要写入的带有div“演示”或“总计”的id。然后在display函数中显式写入一个div，然后再次执行此操作：

 document.getElementById("demo").innerHTML = display(x, y, z);
 //display function already writes to a div. This is redundant

考虑到所有这些指针，我创建了一个简单的JSFiddle，似乎对您的工作像您想要的那样，只需对代码进行最少的修改并进行一些整理。希望它可以帮助您朝正确的方向开始。