<table cellpadding="15" cellspacing="15" width="750">
<tr>
<td width="250"><form name="A">
  <p>Matrix <b>A</b> :<br />
  <input type="text" name="a11" size="4"> <input type="text" name="a12" size="4"> <input
  TYPE="text" NAME="a13" SIZE="4"> <br />
  <input type="text" name="a21" size="4"> <input type="text" name="a22" size="4"> <input
  TYPE="text" NAME="a23" SIZE="4"> <br />
  <input type="text" name="a31" size="4"> <input type="text" name="a32" size="4"> <input
  TYPE="text" NAME="a33" SIZE="4"> </p>
  <p><input type="reset" value="Clear A" size="5"></p>
</form>
</td>
<td width="250"><form name="B">
  <p>Matrix <b>B</b> :<br />
  <input type="text" name="a11" size="4"> <input type="text" name="a12" size="4"> <input
  TYPE="text" NAME="a13" SIZE="4"> <br />
  <input type="text" name="a21" size="4"> <input type="text" name="a22" size="4"> <input
  TYPE="text" NAME="a23" SIZE="4"> <br />
  <input type="text" name="a31" size="4"> <input type="text" name="a32" size="4"> <input
  TYPE="text" NAME="a33" SIZE="4"> </p>
  <p><input type="reset" value="Clear B" size="5"></p>
</form>
</td>
<td width="250"><form name="C">
  <p>Matrix <b>C</b> :<br />
  <input type="text" name="a11" size="4"> <input type="text" name="a12" size="4"> <input
  TYPE="text" NAME="a13" SIZE="4"> <br />
  <input type="text" name="a21" size="4"> <input type="text" name="a22" size="4"> <input
  TYPE="text" NAME="a23" SIZE="4"> <br />
  <input type="text" name="a31" size="4"> <input type="text" name="a32" size="4"> <input
  TYPE="text" NAME="a33" SIZE="4"> </p>
  <p><input type="reset" value="Clear C" size="5"></p>
</form>
</td>
</tr>
</table>

<table cellspacing="5" cellpadding="5">
<tr>
<td valign="TOP"><form name="ReArrange">
  <table width="150">
    <tr>
      <th>ReArrange</th>
    </tr>
    <tr>
      <td><input type="button" value="C --&gt; A" onClick="swap(C,A)"></td>
    </tr>
    <tr>
      <td><input type="button" value="C --&gt; B" onClick="swap(C,B)"></td>
    </tr>
    <tr>
      <td><input type="button" value="A --&gt; B" onClick="swap(A,B)"></td>
    </tr>
    <tr>
      <td><input type="button" value="B --&gt; A" onClick="swap(B,A)"></td>
    </tr>
    <tr>
      <td><input type="button" value="A --&gt; C" onClick="swap(A,C)"></td>
    </tr>
  </table>
</form>
</td>
<td valign="TOP"><form name="Operations">
  <table width="250">
    <tr>
      <th colspan="2">Operations</th>
    </tr>
    <tr>
      <td><input type="button" value="A + B = C" onClick="add(A,B,C)"></td>
      <td><input type="button" value="adj(A) = C" onClick="adj(A,C)"></td>
    </tr>
    <tr>
      <td><input type="button" value="A * B = C" onClick="mult(A,B,C)"></td>
      <td><input type="button" value="inv(A) = C" onClick="inv(A,deta,C)"> </td>
    </tr>
    <tr>
      <td><input type="button" value="B * A = C" onClick="mult(B,A,C)"></td>
      <td><input type="button" value="inv(B) = C" onClick="inv(B,detb,C)"> </td>
    </tr>
  </table>
</form>
</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td valign="TOP"><table width="300">
  <tr>
    <th>Determinant</th>
  </tr>
  <tr>
    <td><form name="deta">
      <p><input type="button" value="det(A)" onClick="det(A, deta)"> <input TYPE="text"
      NAME="output" SIZE="10"></p>
    </form>
    </td>
  </tr>
  <tr>
    <td><form name="detb">
      <p><input type="button" value="det(B)" onClick="det(B,detb)"> <input TYPE="text"
      NAME="output" SIZE="10"> </p>
    </form>
    </td>
  </tr>
</table>
</td>
</tr>
</table>
body {
  font-family: sans-serif;
}

function read (m1, m2) {

   a11 = parseFloat(m1.a11.value, 10)
   a12 =  parseFloat(m1.a12.value, 10)
   a13 = parseFloat(m1.a13.value, 10)

   a21 = parseFloat(m1.a21.value, 10)
   a22 = parseFloat(m1.a22.value, 10)
   a23 = parseFloat(m1.a23.value, 10)

   a31 = parseFloat(m1.a31.value, 10)
   a32 = parseFloat(m1.a32.value, 10)
   a33 = parseFloat(m1.a33.value, 10)


   b11 = parseFloat(m2.a11.value, 10)
   b12 =  parseFloat(m2.a12.value, 10)
   b13 = parseFloat(m2.a13.value, 10)

   b21 = parseFloat(m2.a21.value, 10)
   b22 = parseFloat(m2.a22.value, 10)
   b23 = parseFloat(m2.a23.value, 10)

   b31 = parseFloat(m2.a31.value, 10)
   b32 = parseFloat(m2.a32.value, 10)
   b33 = parseFloat(m2.a33.value, 10)

  }

function swap(m1,m2) {

  m2.a11.value = m1.a11.value
  m2.a12.value = m1.a12.value
  m2.a13.value = m1.a13.value

  m2.a21.value = m1.a21.value
  m2.a22.value = m1.a22.value
  m2.a23.value = m1.a23.value

  m2.a31.value = m1.a31.value
  m2.a32.value = m1.a32.value
  m2.a33.value = m1.a33.value

}

function add(am1, am2, m3) {

  read(am1, am2)

  m3.a11.value = a11 + b11
  m3.a12.value = a12 + b12
  m3.a13.value = a13 + b13
  m3.a21.value = a21 + b21
  m3.a22.value = a22 + b22
  m3.a23.value = a23 + b23
  m3.a31.value = a31 + b31
  m3.a32.value = a32 + b32
  m3.a33.value = a33 + b33
}

function mult(am1, am2, m3) {

  read(am1, am2)

  m3.a11.value = a11*b11+a12*b21+a13*b31
  m3.a12.value = a11*b12+a12*b22+a13*b32
  m3.a13.value = a11*b13+a12*b23+a13*b33
  m3.a21.value = a21*b11+a22*b21+a23*b31
  m3.a22.value = a21*b12+a22*b22+a23*b32
  m3.a23.value = a21*b13+a22*b23+a23*b33
  m3.a31.value = a31*b11+a32*b21+a33*b31
  m3.a32.value = a31*b12+a32*b22+a33*b32
  m3.a33.value = a31*b13+a32*b23+a33*b33

  }

function det(am1, op) {
  read(am1, am1)

  detval = (a11*a22*a33 + a21*a32*a13 + a12*a23*a31) - (a31*a22*a13+a21*a12*a33+a32*a23*a11)

  op.output.value = detval

}

function adj(am1, m3) {

  read(am1, am1)

  b11 =      (a22*a33 - a23*a32)
  b12 = -1 * (a21*a33 - a23*a31)
  b13 =      (a21*a32 - a22*a31)
  b21 = -1 * (a12*a33 - a13*a32)
  b22 =      (a11*a33 - a13*a31)        /*  cofactors */
  b23 = -1 * (a11*a32 -a12*a31)
  b31 =      (a12*a23 - a13*a22)
  b32 = -1 * (a11*a23 - a21*a13)
  b33 =      (a11*a22 - a12*a21)

/* transpose of the cofactors gives adjoint */


  m3.a11.value = b11
  m3.a12.value = b21
  m3.a13.value = b31

  m3.a21.value = b12
  m3.a22.value = b22
  m3.a23.value = b32

  m3.a31.value = b13
  m3.a32.value = b23
  m3.a33.value = b33

}

function inv(am1, aop, am3) {

    read(am1, am1)

    det(am1, aop)

    detval = parseFloat(aop.output.value)

if (detval==0) { alert("You have entered a Singular Matrix.\r Singular Matrices do not have inverses.  \r\rThis can be verified by calculating the determinant equal to 0.") }

  else {

  adj(am1, am3)

  b11 = parseFloat(am3.a11.value, 10)
  b12 = parseFloat(am3.a12.value, 10)
  b13 = parseFloat(am3.a13.value, 10)
  b21 = parseFloat(am3.a21.value, 10)
  b22 = parseFloat(am3.a22.value, 10)
  b23 = parseFloat(am3.a23.value, 10)
  b31 = parseFloat(am3.a31.value, 10)
  b32 = parseFloat(am3.a32.value, 10)
  b33 = parseFloat(am3.a33.value, 10)

  am3.a11.value = b11 / detval
  am3.a12.value = b12 / detval
  am3.a13.value = b13 / detval

  am3.a21.value = b21 / detval
  am3.a22.value = b22 / detval
  am3.a23.value = b23 / detval

  am3.a31.value = b31 / detval
  am3.a32.value = b32 / detval
  am3.a33.value = b33 / detval

        } // ends else
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.