带有 HTML 表单的 Javascript 矩阵计算器答案

【问题标题】：Javascript Matrix Calculator with HTML form带有 HTML 表单的 Javascript 矩阵计算器
【发布时间】：2011-10-19 22:12:52
【问题描述】：

我有一个网站教学生有限数学http://finitehelp.com。
在网站上，我有一个可以进行组合和排列的计算器，现在我正在尝试包含一个矩阵计算器，它可以加、减、乘和逆矩阵。

我正在使用 Javascript 和 sylvester 库 http://sylvester.jcoglan.com/ 进行计算。我能够成功创建一个程序，该程序将用户输入到表单中的值并进行计算，但这仅适用于特定大小（4x4）的矩阵。

我想不通的是如何只从表单中获取不为空的值并从中创建一个矩阵，然后将这些值输出到结果表单中的适当字段中。

我正在使用的一些 Sylvester 方法

// create matrix from embedded array and assign to var A
var A = $M([
  [8,3,9],
  [2,0,7],
  [1,9,3]
]);

// create matrix from embedded array and assign to var B
var B = $M([
  [4,1,2],
  [1,5,3],
  [1,7,2]
]);

 // Multiply AB
 A.x(B)

 // assign product of A.x(B) to var res
 var res = A.x(B)

 // return the 1,1 element of res
 res.e(1,1)

在我的表格中，您可以输入的最大矩阵是 6x6，因为它们永远不需要计算比这更大的矩阵。

我需要程序做的是检测矩阵有多大，从中创建 sylvester 矩阵，并将它们分配给变量。一旦它们是变量，我就可以使用 sylvester 进行操作，但我还需要知道如何将结果输出到表单中。

这是我目前所拥有的

Javascript：

window.onload = function()
{
    document.getElementById('mbutton').onclick = doCalc;
    document.getElementById('subtbutton').onclick = doCalc;
    document.getElementById('addbutton').onclick = doCalc;
}
function doCalc() {
    // assign the inputted values to variables
    var Aval1 = document.matrixCalc.AR1C1.value,
        Aval2 = document.matrixCalc.AR1C2.value,
        Aval3 = document.matrixCalc.AR2C1.value,
        Aval4 = document.matrixCalc.AR2C2.value,
        Bval1 = document.matrixCalc.BR1C1.value,
        Bval2 = document.matrixCalc.BR1C2.value,
        Bval3 = document.matrixCalc.BR2C1.value,
        Bval4 = document.matrixCalc.BR2C2.value;  

    // make matrices out of the inputted values and assign to variables
    var A = $M([
        [Aval1,Aval2],
        [Aval3,Aval4]
        ]);
    var B = $M([
        [Bval1,Bval2],
        [Bval3,Bval4]
        ]);  
    // if user clicks multiply button make the values of
    // the answer form show the appropriate values
    if (this.value == "x") {
        var res = A.x(B);
        document.matrixCalc.PR1C1.value = res.e(1,1);
        document.matrixCalc.PR1C2.value = res.e(1,2);
        document.matrixCalc.PR2C1.value = res.e(2,1);
        document.matrixCalc.PR2C2.value = res.e(2,2);
    } else if (this.value == "-") {
        var res = A.subtract(B);
        document.matrixCalc.PR1C1.value = res.e(1,1);
        document.matrixCalc.PR1C2.value = res.e(1,2);
        document.matrixCalc.PR2C1.value = res.e(2,1);
        document.matrixCalc.PR2C2.value = res.e(2,2);
    } else if (this.value == "+") {
        document.matrixCalc.PR1C1.value = parseFloat(Aval1) + parseFloat(Bval1);
        document.matrixCalc.PR1C2.value = parseFloat(Aval2) + parseFloat(Bval2);
        document.matrixCalc.PR2C1.value = parseFloat(Aval3) + parseFloat(Bval3);
        document.matrixCalc.PR2C2.value = parseFloat(Aval4) + parseFloat(Bval4);
    }
}

HTML 表单：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="sylvester.src.js"></script>
<script type="text/javascript" src="matrices.js"></script>
</head>
<body>
<form name="matrixCalc" action="">
<div id="matrix-a">
    <p>Matrix A</p>
    <input type="text" name="AR1C1" size="4" />
    <input type="text" name="AR1C2" size="4" />
    <input type="text" name="AR1C3" size="4" />
    <input type="text" name="AR1C4" size="4" />
    <input type="text" name="AR1C5" size="4" />
    <input type="text" name="AR1C6" size="4" />
    <br/>                                 
    <input type="text" name="AR2C1" size="4" />
    <input type="text" name="AR2C2" size="4" />
    <input type="text" name="AR2C3" size="4" />
    <input type="text" name="AR2C4" size="4" />
    <input type="text" name="AR2C5" size="4" />
    <input type="text" name="AR2C6" size="4" />
    <br/>                                 
    <input type="text" name="AR3C1" size="4" />
    <input type="text" name="AR3C2" size="4" />
    <input type="text" name="AR3C3" size="4" />
    <input type="text" name="AR3C4" size="4" />
    <input type="text" name="AR3C5" size="4" />
    <input type="text" name="AR3C6" size="4" />
    <br/>                                 
    <input type="text" name="AR4C1" size="4" />
    <input type="text" name="AR4C2" size="4" />
    <input type="text" name="AR4C3" size="4" />
    <input type="text" name="AR4C4" size="4" />
    <input type="text" name="AR4C5" size="4" />
    <input type="text" name="AR4C6" size="4" />
    <br/>                                 
    <input type="text" name="AR5C1" size="4" />
    <input type="text" name="AR5C2" size="4" />
    <input type="text" name="AR5C3" size="4" />
    <input type="text" name="AR5C4" size="4" />
    <input type="text" name="AR5C5" size="4" />
    <input type="text" name="AR5C6" size="4" />
    <br/>                                 
    <input type="text" name="AR6C1" size="4" />
    <input type="text" name="AR6C2" size="4" />
    <input type="text" name="AR6C3" size="4" />
    <input type="text" name="AR6C4" size="4" />
    <input type="text" name="AR6C5" size="4" />
    <input type="text" name="AR6C6" size="4" />
</div>
<div id="matrix-b">
    <p>Matrix B</p>                       
    <input type="text" name="BR1C1" size="4" />
    <input type="text" name="BR1C2" size="4" />
    <input type="text" name="BR1C3" size="4" />
    <input type="text" name="BR1C4" size="4" />
    <input type="text" name="BR1C5" size="4" />
    <input type="text" name="BR1C6" size="4" />
    <br/>                             
    <input type="text" name="BR2C1" size="4" />
    <input type="text" name="BR2C2" size="4" />
    <input type="text" name="BR2C3" size="4" />
    <input type="text" name="BR2C4" size="4" />
    <input type="text" name="BR2C5" size="4" />
    <input type="text" name="BR2C6" size="4" />
    <br/>                             
    <input type="text" name="BR3C1" size="4" />
    <input type="text" name="BR3C2" size="4" />
    <input type="text" name="BR3C3" size="4" />
    <input type="text" name="BR3C4" size="4" />
    <input type="text" name="BR3C5" size="4" />
    <input type="text" name="BR3C6" size="4" />
    <br/>                                
    <input type="text" name="BR4C1" size="4" />
    <input type="text" name="BR4C2" size="4" />
    <input type="text" name="BR4C3" size="4" />
    <input type="text" name="BR4C4" size="4" />
    <input type="text" name="BR4C5" size="4" />
    <input type="text" name="BR4C6" size="4" />
    <br/>                                
    <input type="text" name="BR5C1" size="4" />
    <input type="text" name="BR5C2" size="4" />
    <input type="text" name="BR5C3" size="4" />
    <input type="text" name="BR5C4" size="4" />
    <input type="text" name="BR5C5" size="4" />
    <input type="text" name="BR5C6" size="4" />
    <br/>                                
    <input type="text" name="BR6C1" size="4" />
    <input type="text" name="BR6C2" size="4" />
    <input type="text" name="BR6C3" size="4" />
    <input type="text" name="BR6C4" size="4" />
    <input type="text" name="BR6C5" size="4" />
    <input type="text" name="BR6C6" size="4" />
    <br/>
</div>
<div id="buttons">
    <input type="button" id="mbutton" value="x" />
    <input type="button" id="addbutton" value="+" />
    <input type="button" id="subtbutton" value="-" />
</div>
<div id="matrix-c">
    <p>Answer</p>
    <input type="text" name="PR1C1" size="4" />
    <input type="text" name="PR1C2" size="4" />
    <input type="text" name="PR1C3" size="4" />
    <input type="text" name="PR1C4" size="4" />
    <input type="text" name="PR1C5" size="4" />
    <input type="text" name="PR1C6" size="4" />
    <br/>                                
    <input type="text" name="PR2C1" size="4" />
    <input type="text" name="PR2C2" size="4" />
    <input type="text" name="PR2C3" size="4" />
    <input type="text" name="PR2C4" size="4" />
    <input type="text" name="PR2C5" size="4" />
    <input type="text" name="PR2C6" size="4" />
    <br/>                                
    <input type="text" name="PR3C1" size="4" />
    <input type="text" name="PR3C2" size="4" />
    <input type="text" name="PR3C3" size="4" />
    <input type="text" name="PR3C4" size="4" />
    <input type="text" name="PR3C5" size="4" />
    <input type="text" name="PR3C6" size="4" />
    <br/>                               
    <input type="text" name="PR4C1" size="4" />
    <input type="text" name="PR4C2" size="4" />
    <input type="text" name="PR4C3" size="4" />
    <input type="text" name="PR4C4" size="4" />
    <input type="text" name="PR4C5" size="4" />
    <input type="text" name="PR4C6" size="4" />
    <br/>                                
    <input type="text" name="PR5C1" size="4" />
    <input type="text" name="PR5C2" size="4" />
    <input type="text" name="PR5C3" size="4" />
    <input type="text" name="PR5C4" size="4" />
    <input type="text" name="PR5C5" size="4" />
    <input type="text" name="PR5C6" size="4" />
    <br/>                                 
    <input type="text" name="PR6C1" size="4" />
    <input type="text" name="PR6C2" size="4" />
    <input type="text" name="PR6C3" size="4" />
    <input type="text" name="PR6C4" size="4" />
    <input type="text" name="PR6C5" size="4" />
    <input type="text" name="PR6C6" size="4" />
</div>
</body>
</html>

任何帮助将不胜感激。回答时请记住，这只是我第二次尝试编写程序，因此解释中的一些额外内容可能会有很大帮助。谢谢。

【问题讨论】：

如果用户随机将框留空，您会怎么做？抛出某种错误？
这些总是方阵吗？
如果他们将一个框留空，然后在同一行中填写另一个框，那么是的，这将是一个错误，否则将假定空值为零。比如 3 2 blank 5 会出错，但是 3 2 7 5 会假设矩阵是 4 列。
不，它们并不总是方形的。

标签： javascript foreach forms matrix-multiplication

【解决方案1】：

我认为您会发现使用 textarea 并让用户以更自然的格式输入矩阵会更好。它需要解析内容，但这并不难。这样用户就可以创建任何大小的矩阵。稍后我可以发布一个通用的“解析 textarea 内容以创建一个数组”函数。

另外，数学并不难。我前段时间做过（产品，加法，决定因素），但找不到我把它放在哪里。行列式是最困难的，如果我没记错的话，这很简单，就是将较大的矩阵拆分为 2x2 矩阵，然后加上和减去它们的行列式（我需要的一切都在 Wolfram 网站上）。

【讨论】：

+1 表示textarea 将花费更少的时间来输入数据。
是的，这样对用户更友好，我会研究一下。