document.getElementById

Hi, It doesn´t work and I don´t know why
That´s the error mesege:

Cannot read property ‘value’ of null
at determinante

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Determinante-inversa</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/mio.js"></script>
	<style type="text/css">
		td{
			border: 1px solid black;
			width: 50px;
		}
	</style>
</head>
<body>

<form action="#">
	<input type="text" name="num00"><input type="text" name="num01"><input type="text" name="num02"><br>
	<input type="text" name="num10"><input type="text" name="num11"><input type="text" name="num12"><br>
	<input type="text" name="num20"><input type="text" name="num21"><input type="text" name="num22"><br>

	<button onclick="determinante()">CALCULAR DETERMINANTE</button>
	<button onclick="inversa()">CALCULAR INVERSA</button>


</form>

<p id="solucion"></p>





</table>




</body>
</html>

JS

function determinante() {
	
var matriz = new Array(3);
for (i=0;i<=2;i++){
	matriz[i]=new Array (3);
}


for (i=0;i<=2;i++){
	for (j=0;j<=2;j++)
{


lugar="num"+i+j;
matriz[i][j]=document.getElementById("num"+i+j).value;
matriz[i][j]=parseInt(matriz[i][j]);


if (isNaN(matriz[i][j])) {
	alert("Error: debes introducir números")	
}


}
}

	$solucion=(matriz[0][0]*matriz[1][1]*matriz[2][2])+(matriz[0][1]*matriz[1][2]*matriz[0][2])+(matriz[0][2]*matriz[2][1]*matriz[1][2])-((matriz[0][2]*matriz[1][1]*matriz[2][0])+(matriz[2][2]*matriz[1][0]*matriz[0][1])+(matriz[0][0]*matriz[1][2]*matriz[2][1]));

	if (!isNaN($solucion)) {
		document.getElementsById("solucion").innerHTML="La solución es "+$solucion;
	}


}

One of these things is not like the other~

1 Like

Also you are calling main.js before the HTML has been rendered; put the <script> before </body>.

Shouldnt matter because the functions are invoked by onclick event calls and lookup in-situ.

1 Like

Actually I’d suggest not to hard-code those indices as IDs at all, but just structure your markup in a way that reflects the matrix rows and columns:

<div class="matrix">
  <div class="row">
    <input type="number" class="col">
    <input type="number" class="col">
    <input type="number" class="col">
  </div>
  <div class="row">
    <input type="number" class="col">
    <input type="number" class="col">
    <input type="number" class="col">
  </div>
  <div class="row">
    <input type="number" class="col">
    <input type="number" class="col">
    <input type="number" class="col">
  </div>
</div>

<button type="button" id="calc-determinant">Calculate determinant</button>

You can then derive the matrix directly by mapping the rows to their columns, and the columns to their input values:

var mapValue = function (col) {
  return parseInt(col.value, 10) || 0
}

var mapColumns = function (row) {
  return Array.from(row.children, mapValue)
}

var mapRows = function (matrix) {
  return Array.from(matrix.children, mapColumns)
}

var getMatrix = function (selector) {
  var matrix = document.querySelector(selector)
  return mapRows(matrix)
}

var calcDeterminant = document.getElementById('calc-determinant')

calcDeterminant.addEventListener('click', function () {
  var matrix = getMatrix('.matrix')
  console.table(matrix)
  // Calculate determinant here
})

This way, you don’t have to worry about keeping your JS and markup in sync when you change the number of rows or columns; it will always work without additional adjustments, even if you have more than 10 of either.

(BTW you also forgot to declare your loop variables in your original solution…)

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.