• 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

185
Vistas
Javascript doesn't show a generated number? (document.getElementById)

I want num1 and num2 to generate as a random number from 1-12, when I run it, I only get 2+2.

Here is what I think is wrong with my code

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>

Here's a link to the full code, not everything is finished due to some circumstances with college. https://jsfiddle.net/LiamBox/f406mgpb/3/

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

0

3 problems with your code:

  1. Your usage of Math.floor and Math.random isn't quite right. Calling Math.floor(Math.random) is just going to pass the function itself to floor. You probably want Math.floor(Math.random() * 13)
  2. Your code is all inside of a function that doesn't get called. You'll need to invoke it somewhere or move it out of the function so it's run when the page is loaded.
  3. id needs to be a string - the way you used it num1 is being interpreted as a local variable name, which due to unfortunate naming, contains the random number generated.

  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

This solution assigns DOM elements to global variables, and uses a supporting function to better follow the Don't Repeat Yourself principle.

And below the snippet you'll find a step-by-step description of how you might start debugging your original code.

// 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>


Here's how you'd begin to get from your original code to something more like the above:

  • If you run your code in your browser and open the browser console, you should see an error message with information something like:

    Cannot set properties of null (setting 'innerHTML') ... line 26 ...,

    meaning that on line 26, you're asking JavaScript for the innerHTML property of something that has no such property (because it is null).

  • Checking the indicated line, you'd see:

    document.getElementById(num1).innerHTML = num1;

    so "document.getElementById(num1)" must evaluate to null ... meaning JavaScript can't find an element whose id matches the value stored in the variable called num1

  • If you wanted to learn what num1 evaluates to, you'd add a simple line like console.log(num1); to your script and refresh your browser -- but in this case, you might already see in the code that num1 is expected to hold a random number, not an id string.

  • So you'd change your code to pass a more appropriate argument to .getElementById() -- then refresh your browser to see the next error message and repeat this debugging process until there are no more errors to conquer.

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