带有HTML表单的Javascript矩阵计算器
我有一个教学生有限数学的网站。带有HTML表单的Javascript矩阵计算器,javascript,foreach,forms,matrix-multiplication,Javascript,Foreach,Forms,Matrix Multiplication,我有一个教学生有限数学的网站。 在这个网站上，我有一个计算器，可以进行组合和排列，现在我正试图包括一个矩阵计算器，可以进行矩阵的加、减、乘和逆运算 我正在使用Javascript和sylvester库进行计算。我能够成功地创建一个程序，该程序将用户输入的值输入表单并进行计算，但这只适用于特定大小（4x4）的矩阵 我无法理解的是，如何只从非空的表单中获取值，并从中创建一个矩阵，然后将这些值输出到结果表单中的相应字段中 我使用的一些西尔维斯特方法 // create matrix from embe
在这个网站上，我有一个计算器，可以进行组合和排列，现在我正试图包括一个矩阵计算器，可以进行矩阵的加、减、乘和逆运算 我正在使用Javascript和sylvester库进行计算。我能够成功地创建一个程序，该程序将用户输入的值输入表单并进行计算，但这只适用于特定大小（4x4）的矩阵 我无法理解的是，如何只从非空的表单中获取值，并从中创建一个矩阵，然后将这些值输出到结果表单中的相应字段中 我使用的一些西尔维斯特方法
// 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)
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>
<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>
矩阵A
矩阵B
答复
任何帮助都将不胜感激。回答时请记住，这只是我第二次尝试编写程序，因此解释中的一点点额外内容可能会有很大帮助。谢谢。我想你会发现使用文本区更好，让用户以更自然的格式键入矩阵。它需要解析内容，但这并不难。这样用户就可以创建任意大小的矩阵。我可以稍后发布一个通用的“parse textarea content to make a array”函数
而且，数学也没那么难。我在一段时间前做过（产品、加法、行列式），但找不到放在哪里。行列式是最困难的，如果我没记错的话，这是一个简单的问题，将较大的矩阵拆分为2x2矩阵，然后加上和减去它们的行列式（我需要的一切都在Wolfram网站上）。如果用户随机将框留空，你想怎么做？抛出某种错误？这些总是平方矩阵吗？如果它们留下一个空格，然后在同一行中填充另一个空格，那么肯定是错误，或者假设空值为零。例如3 2空白5将是一个错误，但3 2 7 5将假定矩阵为4列。不，它们并不总是正方形。
textarea