I'm having trouble with my codes as I want to show and print the random number , operators and the answer of it when I clicked the "New" onclick button. Please help me. Thanks
<!DOCTYPE html>
<html>
<title>MATH FLASHCARD 1.0</title>
<head>
<link rel="stylesheet" href="style.css">
<script>
var operators = [{
sign: "+",
method: function(num1,num2){ return num1 + num2; }
},{
sign: "-",
method: function(num1,num2){ return num1 - num2; }
}];
var selectedOperator = Math.floor(Math.random()*operators.length);
operators[selectedOperator].sign //this will give you the sign
operators[selectedOperator].method(rnum1, rnum2) //this will give you the answer
function New()
{
num1 = document.getElementById("num1");
num2 - document.getElementById("num2");
rnum1 = Math.floor((Math.random()*10)+1);
rnum2 = Math.floor((Math.random()*10)+1);
num1.innerHTML=rnum1
num2.innerHTML=rnum2
}
</script>
</head>
<h2>MATH FLASHCARDS V1.0</h2>
<body>
<div>
<div id="num1"></div><!--end of num1-->
<div id="num2"></div><!--end of num2-->
<div id="operators"></div><!--end of operator-->
<div id="answer"></div><!--end of answer-->
<button onclick="New()">New</button>
Learn to read the errors in the console. In this case the errors clearly explain exactly what is wrong with your code.
First, declare your variables.
Then put your code that determines the answer in the function so that it's actually called.
Then call the function and actually do something with the output. I just put in in the console.
var num1, num2, rnum1, rnum2, sign, answer;
var operators = [{
sign: "+",
method: function(num1, num2) {
return num1 + num2;
}
}, {
sign: "-",
method: function(num1, num2) {
return num1 - num2;
}
}];
New();
function New() {
num1 = document.getElementById("num1");
num2 = document.getElementById("num2");
rnum1 = Math.floor((Math.random() * 10) + 1);
rnum2 = Math.floor((Math.random() * 10) + 1);
num1.innerHTML = rnum1
num2.innerHTML = rnum2
var selectedOperator = Math.floor(Math.random() * operators.length);
sign = operators[selectedOperator].sign //this will give you the sign
answer = operators[selectedOperator].method(rnum1, rnum2) //this will give you the answer
console.log('sign:', sign, 'answer:', answer);
}<h2>MATH FLASHCARDS V1.0</h2>
<div>
<div id="num1"></div>
<!--end of num1-->
<div id="num2"></div>
<!--end of num2-->
<div id="operators"></div>
<!--end of operator-->
<div id="answer"></div>
<!--end of answer-->
<button onclick="New()">New</button>
</div>Maybe this is the result you are looking for:
let operators = [{
sign: "+",
method: function(num1, num2) {
return num1 + num2;
}
}, {
sign: "-",
method: function(num1, num2) {
return num1 - num2;
}
}];
function New() {
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const operatorEl = document.getElementById("operators");
const answerEl = document.getElementById("answer");
const rnum1 = Math.floor((Math.random() * 10) + 1);
let rnum2;
do{
rnum2 = Math.floor((Math.random() * 10) + 1)
}while(rnum2 > rnum1)
const selectedOperator = Math.floor(Math.random() * operators.length);
const operator = operators[selectedOperator] //this will give you the sign
const answer = operator.method(rnum1, rnum2) //this will give you the answer
num1.innerHTML = rnum1
num2.innerHTML = rnum2
operatorEl.innerHTML = operator.sign;
answerEl.innerHTML = answer
}<h2>MATH FLASHCARDS V1.0</h2>
<div>
<div id="num1"></div>
<!--end of num1-->
<div id="num2"></div>
<!--end of num2-->
<div id="operators"></div>
<!--end of operator-->
<div id="answer"></div>
<!--end of answer-->
<button onclick="New()">New</button>
</div>