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/
3 problems with your code:
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)
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>
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.