• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

183
Vistas
¿Javascript no muestra un número generado? (documento.getElementById)

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/

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

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.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda