Estoy intentando crear una calculadora como algo. Tengo una función personalizada que se supone que carga el valor de entrada de dos variables y las une, pero no funcionó, así que verifiqué con el registro de la consola si carga el valor de entrada, y todo lo que dice es que los valores son indefinidos. ¿Alguna idea de cómo solucionar esto, por favor?
let num1 = document.getElementById("number1").value, num2 = document.getElementById("number2").value, operator = document.getElementById("select"), resolutor = document.getElementById("resolute"), res = document.getElementById("result"); function mathoperation(num1, num2) { let value = operator.value, result; switch (value) { case "plus": console.log(num1); //console says unindefied console.log(num2); //console says unindefied break; } } <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Úloha 18.1</title> </head> <body> <input type="text" id="number1"> <select name="" id="select"> <option value="plus">+</option> <option value="minus">-</option> <option value="krat">*</option> <option value="deleno">/</option> </select> <input type="text" id="number2"> <input type="button" id="resolute" value="=" onclick="mathoperation()"> <input type="text" id="result" readonly> </body> </html>Debe obtener el valor del elemento de entrada dentro de su controlador de eventos de clic porque necesita esos valores en el momento en que hace clic en él
function mathoperation() { let num1 = document.getElementById("number1").value, num2 = document.getElementById("number2").value, operator = document.getElementById("select"), resolutor = document.getElementById("resolute"), res = document.getElementById("result"); let operatorValue = operator.value; switch (operatorValue) { case "plus": let result = Number(num1) + Number(num2); res.value = result; console.log(num1); //console says unindefied console.log(num2); //console says unindefied break; } } <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Úloha 18.1</title> </head> <body> <input type="text" id="number1"> <select name="" id="select"> <option value="plus">+</option> <option value="minus">-</option> <option value="krat">*</option> <option value="deleno">/</option> </select> <input type="text" id="number2"> <input type="button" id="resolute" value="=" onclick="mathoperation()"> <input type="text" id="result" readonly> </body> </html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Úloha 18.1</title> </head> <body> <input type="text" id="number1"> <select name="" id="select"> <option value="plus">+</option> <option value="minus">-</option> <option value="krat">*</option> <option value="deleno">/</option> </select> <input type="text" id="number2"> <input type="button" id="resolute" value="=" onclick="mathoperation()"> <input type="text" id="result" readonly> <script> function mathoperation(num1, num2) { var num1 = document.getElementById("number1").value; var num2 = document.getElementById("number2").value; var operator = document.getElementById("select"); var resolutor = document.getElementById("resolute"); var res = document.getElementById("result"); let value = operator.value, result; switch (value) { case "plus": res.value = parseInt(num1)+parseInt(num2); break; } } </script> </body> </html>Mover su tarea dentro de la función puede resolver esto.
Esto debería ayudarte a comenzar-
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Úloha 18.1</title> </head> <body> <input type="text" id="number1"> <select name="" id="select"> <option value="plus">+</option> <option value="minus">-</option> <option value="krat">*</option> <option value="deleno">/</option> </select> <input type="text" id="number2"> <input type="button" id="resolute" value="=" onclick="mathoperation()"> <input type="text" id="result" readonly> <script> function mathoperation(num1, num2) { var num1 = document.getElementById("number1").value; var num2 = document.getElementById("number2").value; var operator = document.getElementById("select"); var resolutor = document.getElementById("resolute"); var res = document.getElementById("result"); let value = operator.value, result; switch (value) { case "plus": res.value = parseInt(num1)+parseInt(num2); break; } } </script> </body> </html>