What's wrong? I have created the code and it works, but for some special reason I don't know, it reloads when it stops generating the "table" and I lose the generated code.
Here's the markup
<body>
<form action="" name="calculadora">
<p>
¿De qué tamaño quieres el determinante? (<span style="font-weight:bold;font-size: 20px">n</span>x<span style="font-weight:bold; font-size:20px">n</span>)
<input type="text" name="number" size="2"> <button onclick="generate()">Generar cuadrícula</button>
</p>
<div id="determinante">
</div>
<button onclick="">Caclular</button>
<div id="resultado">
<output name="result" for="determinante" style="background='red';"></output>
</div>
</form>
<script src="calculate.js"></script>
</body>
Then the JS code:
function generate(){
var number = document.calculadora.number.value,
determinante = document.getElementById("determinante");
function generarDeterminante(number) {
for (var i = 0; i < number; i++) {
for (var j = 0; j < number; j++) {
var input = document.createElement("div");
input.innerHTML = "<input type='text' style='display:inline' name='x"+i+j+"' size='4'>";
determinante.appendChild(input);
}
determinante.innerHTML += "<br>";
}
}
generarDeterminante(number);
}
This is annoying, sure it's a silly and little problem, but I don't know how to find it...