3 problemas con tu código:

1. Su uso de 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)
2. Su código está todo dentro de una función que no se llama. Deberá invocarlo en algún lugar o sacarlo de la función para que se ejecute cuando se cargue la página.
3. id debe ser una cadena: la forma en que lo usó 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.