Quiero que num1 y num2 se generen como un número aleatorio del 1 al 12, cuando lo ejecuto, solo obtengo 2+2.
Esto es lo que creo que está mal con mi código
function generate_equation() { //generates random numbers and random equation var num1 = Math.floor(Math.random) * 13; var num2 = Math.floor(Math.random) * 13; var all_answers = []; var switch_answers = []; answer = num1 + num2; document.getElementById(num1).innerHTML = num1; document.getElementById(num2).innerHTML = num2; }
<div class="equation"> <h1 id="num1" style="padding: 0 5px">2</h1> <h1 id="operator" style="padding: 0 5px">+</h1> <h1 id="num2" style="padding: 0 5px">2</h1> </div>
Aquí hay un enlace al código completo, no todo está terminado debido a algunas circunstancias con la universidad. https://jsfiddle.net/LiamBox/f406mgpb/3/
3 problemas con tu código:
Math.floor
y Math.random
no es del todo correcto. Llamar Math.floor(Math.random)
solo pasará la función a floor
. Probablemente quieras Math.floor(Math.random() * 13)
num1
se interpreta como un nombre de variable local, que debido a una denominación desafortunada, contiene el número aleatorio generado. var num1 = Math.floor(Math.random() * 13); var num2 = Math.floor(Math.random() * 13); var all_answers = []; var switch_answers = []; answer = num1 + num2; document.getElementById('num1').innerHTML = num1; document.getElementById('num2').innerHTML = num2;
<div class="equation"> <h1 id="num1" style="padding: 0 5px">2</h1> <h1 id="operator" style="padding: 0 5px">+</h1> <h1 id="num2" style="padding: 0 5px">2</h1> </div>
Esta solución asigna elementos DOM a variables globales y utiliza una función de soporte para seguir mejor el principio de No repetirse.
Y debajo del fragmento, encontrará una descripción paso a paso de cómo puede comenzar a depurar su código original.
// Identifies some DOM elements const h1_num1 = document.getElementById("num1"), h1_num2 = document.getElementById("num2"), h1_answer = document.getElementById("answer"); // Invokes main function generate_equation(); // Defines main function function generate_equation() { // Generates random numbers (using supporting function), and gets their sum const num1 = randIntBelow(13), num2 = randIntBelow(13), sum = num1 + num2; // Populates the elements h1_num1.innerHTML = num1; h1_num2.innerHTML = num2; h1_answer.innerHTML = sum; } // Defines supporting function function randIntBelow(limit){ const rand_num_below_limit = Math.random() * limit, integer_part = Math.floor(rand_num_below_limit); return integer_part; }
/* Using CSS to keep styling separate from structure makes HTML less repetetive and more maintainable */ h1{ padding: 0 5px; margin: 0; }
<div class="equation"> <h1 id="num1"></h1> <h1 id="operator">+</h1> <h1 id="num2"></h1> <h1 id="equals">=</h1> <h1 id="answer"></h1> </div>
Así es como comenzaría a pasar de su código original a algo más como lo anterior:
Si ejecuta su código en su navegador y abre la consola del navegador , debería ver un mensaje de error con información similar a:
Cannot set properties of null (setting 'innerHTML') ... line 26 ...
,
lo que significa que en la línea 26, le está solicitando a JavaScript la propiedad innerHTML
de algo que no tiene tal propiedad (porque es null
).
Verificando la línea indicada , verías:
document.getElementById(num1).innerHTML = num1;
entonces "document.getElementById(num1)" debe evaluarse como null
... lo que significa que JavaScript no puede encontrar un elemento cuya id
coincida con el valor almacenado en la variable llamada num1
Si quisiera saber a qué se evalúa num1
, agregaría una línea simple como console.log(num1);
a su secuencia de comandos y actualice su navegador, pero en este caso, es posible que ya vea en el código que se espera que num1
contenga un número aleatorio, no una cadena de id
.
Entonces, cambiaría su código para pasar un argumento más apropiado a .getElementById()
, luego actualice su navegador para ver el siguiente mensaje de error y repita este proceso de depuración hasta que no haya más errores para conquistar.