Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

267
Visualizações
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/

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

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>

about 4 years ago · Juan Pablo Isaza Relatório

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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda