Tengo problemas con mis códigos porque quiero mostrar e imprimir el número aleatorio, los operadores y la respuesta cuando hice clic en el botón "Nuevo". Por favor, ayúdame. Gracias
<!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>Aprenda a leer los errores en la consola. En este caso, los errores explican claramente qué es lo que está mal con su código.
Primero, declara tus variables.
Luego coloque su código que determina la respuesta en la función para que realmente se llame.
Luego llame a la función y realmente haga algo con la salida. Acabo de poner en la consola.
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>Quizás este sea el resultado que buscas:
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>