JavaScript 不从 HTML 表单中获取值答案

【问题标题】：JavaScript not taking values from HTML formJavaScript 不从 HTML 表单中获取值
【发布时间】：2014-02-14 00:37:26
【问题描述】：

我目前正在尝试制作一个解决 Kremer 规则的项目，但是，我的 JS 没有打印到浏览器。这是我目前所拥有的：

我想知道如何修改我的代码以打印到浏览器：我使用了错误的方法吗？我是否应该使用“getElementById()”函数来获取值。在函数中声明类有问题吗？

它只是写“document.write(”方程是：“);”甚至在调用该函数之前到表单上方的文档。

<!DOCTYPE html>
<html>
<head>
    <title>Kremer's rule</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <h1>Solve Kremer's Rule</h1>

    <SCRIPT LANGUAGE="JavaScript">
    function testResults (form) {

        function system (x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3){
           this.x1 = x1;
           this.x2 = x2;
           this.x3 = x3;
           this.y1 = y1;
           this.y2 = y2;
           this.y3 = y3;
           this.z1 = z1;
           this.z2 = z2;
           this.z3 = z3;
           this.a1 = a1;
           this.a2 = a2;
           this.a3 = a3;
           this.calcDanswer = function() {
               return (this.x1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*D.y3)- (this.y2*this.x3)));
           };
           this.calcXanswer = function(){
               return (this.a1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.a2*this.z3)-(this.z2*this.a3))) + (this.z1*((this.a2*this.y3)-(this.y2*this.a3)));
           };
           this.calcYanswer = function(){
               return (this.x1*((this.a2*this.z3)-(this.z2*this.a3))) - (this.a1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*this.a3)-(this.a2*this.x3)));
           };
           this.calcZanswer = function(){
               return (this.x1*((this.y2*this.a3)-(this.a2*this.y3))) - (this.y1*((this.x2*this.a3)-(this.a2*this.x3))) + (this.a1*((this.x2*this.y3)-(this.y2*this.x3)));
           };
        }

        var x1 = form.x1.value;
        var x2 = form.x2.value;
        var x3 = form.x3.value;
        var y1 = form.y1.value;
        var y2 = form.y2.value;
        var y3 = form.y3.value;
        var z1 = form.z1.value;
        var z2 = form.z2.value;
        var z3 = form.z3.value;
        var a1 = form.a1.value;
        var a2 = form.a2.value;
        var a3 = form.a3.value;

        var D = new system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3);
        var X = D.calcXanswer()/D.calcDanswer();
        var Y = D.calcYanswer()/D.calcDanswer();
        var Z = D.calcZanswer()/D.calcDanswer();
    }

      //printing to console
       document.write("The equations are:");
       document.write(D.x1 + "x + " + D.y1 + "y + " + D.z1 +"z = "+D.a1);
       document.write(D.x2 + "x + " + D.y2 + "y + " + D.z2 +"z = "+D.a2);
       document.write(D.x3 + "x + " + D.y3 + "y + " + D.z3 +"z = "+D.a3);

       document.write("The answer for D is " + D.calcDanswer());
       document.write("The answer for Dx is " + D.calcXanswer());
       document.write("The answer for Dy is " + D.calcYanswer());
       document.write("The answer for Dy is " + D.calcZanswer());
       document.write();
       document.write("X is " + X);
       document.write("Y is " + Y);
       document.write("Z is " + Z);
    </SCRIPT>

</head>

<body>
    <!--Explaination-->
    <div>
        <h2><span id="highlight">What this does</span></h2>
        <p>Type in all the information for your system of three equations.<br />
        When finished hit "Go".</p>
    </div>

    <!--Form-->
    <div class="matrix">
        <FORM NAME="myform" ACTION="" METHOD="GET">
        <input type="text" name="x1"> x + <input type="text" name="y1"> y + <input type="text" name="z1"> z = <input type="text" name="a1"><br />
        <input type="text" name="x2"> x + <input type="text" name="y2"> y + <input type="text" name="z2"> z = <input type="text" name="a2"><br />
        <input type="text" name="x3"> x + <input type="text" name="y3"> y + <input type="text" name="z3"> z = <input type="text" name="a3"><br />
        <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
        </form>
    </div>

    <!--Answer-->
    <div id="answer">
        <h1><span id="highlight">The Answer:</span></h2>
            hiyhioiihhoihohhi<br/>
    </div>
</body>

</html>

【问题讨论】：

你遇到了什么错误？
它没有给我一个错误，而是仅写“document.write("The equations are:");"甚至在函数被调用之前到表单上方的文档。
是的，它给你一个错误，它试图使用未定义的变量。如果您还没有使用浏览器控制台/调试器，here's how to do it

标签： javascript html forms oop dom

【解决方案1】：

您的D,X,Y,Z 变量是testResults 的本地变量，而您正试图在testResults 之外使用它们。

您可能只想将您的document.writes 移动到testResults 中，更好的是，改为操作 DOM，这样您就不会丢失页面中的所有内容

Working code

function testResults (form) {

    function system (x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3){
        ...
    }

    var x1 = form.x1.value;
    var x2 = form.x2.value;
    var x3 = form.x3.value;
    var y1 = form.y1.value;
    var y2 = form.y2.value;
    var y3 = form.y3.value;
    var z1 = form.z1.value;
    var z2 = form.z2.value;
    var z3 = form.z3.value;
    var a1 = form.a1.value;
    var a2 = form.a2.value;
    var a3 = form.a3.value;

    var D = new system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3);
    var X = D.calcXanswer()/D.calcDanswer();
    var Y = D.calcYanswer()/D.calcDanswer();
    var Z = D.calcZanswer()/D.calcDanswer();



    // printing to he apge
    var out = document.getElementById('real-answer');
    out.innerHTML += "The equations are:" +
        D.x1 + "x + " + D.y1 + "y + " + D.z1 +"z = "+D.a1 +
        D.x2 + "x + " + D.y2 + "y + " + D.z2 +"z = "+D.a2 +
        D.x3 + "x + " + D.y3 + "y + " + D.z3 +"z = "+D.a3 +

       "The answer for D is " + D.calcDanswer() + 
       "The answer for Dx is " + D.calcXanswer() +
       "The answer for Dy is " + D.calcYanswer() + 
       "The answer for Dy is " + D.calcZanswer() +
       "X is " + X +
       "Y is " + Y +
       "Z is " + Z;        
}

【讨论】：