基本的JavaScript计算器

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中没有ID为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是字符串，但是我建议在进行数学运算之前将它们转换为数字。
• <form name =“ myForm”应该说<form id =“ myForm”

Answer 3

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

<button>Reset form</button>

当您单击它时，所有窗体的内容将消失。

Answer 4

1. 您尚未使用任何id，请使用id="myForm" ，然后重置按钮将完美工作。

2. 正确关闭您的验证功能。

3. 您尚未添加任何位置来显示结果。

Answer 5

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

1. 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 

2. 您正在传递输入的值以将函数显示为字符串。 您需要在validateForm方法中将它们解析为整数。

3. 在resetForm方法中，您通过执行document.getElementById("myForm")来引用表单。 但是， form元素没有该id 。

4. 您可以完全取消单击“ CalculatePayment”按钮时调用的myFunction() ，然后在该处调用validateForm方法。

5. 您似乎没有要写入id “ demo”或“ total”的div 。 然后在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函数； 在顶部。