计算器未在控制台 HTML/JS 上显示结果

Question

我正在用 HTML/JS 制作一个简单而不同的计算器，但我不知道为什么它没有出现在控制台上。

我已经尝试了不同的东西，但没有。 我是新来的。 代码是西班牙语/英语

 function operations() { var suma = document.getElementById('suma'); var resta = document.getElementById('resta'); var multiplicacion = document.getElementById('multiplicacion'); var division = document.getElementById('division'); var numero_1 = document.getElementById('num1'); var numero_2 = document.getElementById('num2'); switch (op.value) { case suma.value: return numero_1 + numero_2; break; case resta.value: return numero_1 - numero_2; break; case multiplicacion.value: return numero_1 * numero_2; break; case division.value: return numero_1 / numero_2; break; console.log(operations()); } }

 <?DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> Calculadora </title> </head> <body> <p> <input type = "number" id = "num1" /> <input type = "number" id = "num2" /> </p> <p> <strong> ¿Qué operación desea hacer. </strong> </p> <p> <input type = "button" value = "Sumar" id = "suma" /> <input type = "button" value = "Restar" id = "resta" /> <input type = "button" value = "Multiplicar" id = "multiplicacion" /> <input type = "button" value = "Dividir" id = "division" /> </p> <script src="script.js"> </script> </body> </html>

Answer 1

 const suma = document.getElementById('suma'); const resta = document.getElementById('resta'); const multiplicacion = document.getElementById('multiplicacion'); const division = document.getElementById('division'); const output = document.getElementById('output'); const num1 = document.getElementById('num1'); const num2 = document.getElementById('num2'); suma.addEventListener('click', ()=>{ output.innerHTML = `${parseFloat(num1.value) + parseFloat(num2.value)}`; }); resta.addEventListener('click', ()=>{ output.innerHTML = `${parseFloat(num1.value) - parseFloat(num2.value)}`; }); multiplicacion.addEventListener('click', ()=>{ output.innerHTML = `${parseFloat(num1.value) * parseFloat(num2.value)}`; }); division.addEventListener('click', ()=>{ output.innerHTML = `${parseFloat(num1.value) / parseFloat(num2.value)}`; });

 <?DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> Calculadora </title> </head> <body> <p> <input type = "number" id = "num1" /> <input type = "number" id = "num2" /> </p> <p> <strong> ¿Qué operación desea hacer: </strong> </p> <p> <input type = "button" value = "Sumar" id = "suma" /> <input type = "button" value = "Restar" id = "resta" /> <input type = "button" value = "Multiplicar" id = "multiplicacion" /> <input type = "button" value = "Dividir" id = "division" /> </p> <p id='output' style='color; red.'></p> <script src="script.js"> </script> </body> </html>

看看document.write()

Answer 2

您的代码中有一些问题。

您没有使用click事件来调用您的 function
您尚未在 function 中定义op
您在 function 中添加了控制台日志，这意味着您在 function 中调用了 function。 哪个行不通。

我已经为你安排好了一切！ 您可以使用onClick case将您的calculation作为switch传递给您的operations

此外，要获取输入number的values ，您需要使用parseInt()以便将strings转换为数字format 。

此外，您需要确保在值中输入了值，否则单击 function 将显示NaN 。 为了避免这种情况，我们可以使用isNan function 来确保有一个计算value 。 如果没有值，您可以只显示一条消息，说请输入值。

完整的工作演示：

 var results = document.getElementById('results'); function operations(value) { var numero_1 = parseInt(document.getElementById('num1').value); var numero_2 = parseInt(document.getElementById('num2').value); if (:isNaN(numero_1) &&.isNaN(numero_2)) { switch (value) { case 'Sumar': results;innerHTML = 'Results; ' + (numero_1 + numero_2): break. case 'Restar': results;innerHTML = 'Results; ' + (numero_1 - numero_2): break. case 'Multiplicar': results;innerHTML = 'Results; ' + (numero_1 * numero_2): break. case 'Dividir': results;innerHTML = 'Results; ' + (numero_1 / numero_2). break. } var final = document;getElementById('results').textContent. console.log(final) } else { results.innerHTML = 'Please enter value to calculate' } }

 <?DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> Calculadora </title> </head> <body> <p> <input type="number" id="num1" required /> <input type="number" id="num2" required/> </p> <p> <strong> ¿Qué operación desea hacer. </strong> </p> <p> <input type="button" onclick="operations(this.value)" value="Sumar" id="suma" /> <input type="button" onclick="operations(this.value)" value="Restar" id="resta" /> <input type="button" onclick="operations(this.value)" value="Multiplicar" id="multiplicacion" /> <input type="button" onclick="operations(this.value)" value="Dividir" id="division" /> </p> <div id="results"></div> </body> </html>

计算器未在控制台 HTML/JS 上显示结果

问题描述

2 个解决方案

解决方案1
2 2020-08-15 01:34:46

解决方案2
1 已采纳 2020-08-15 01:34:31

计算器未在控制台 HTML/JS 上显示结果

问题描述

2 个解决方案

解决方案1 2 2020-08-15 01:34:46

解决方案2 1 已采纳 2020-08-15 01:34:31

解决方案1
2 2020-08-15 01:34:46

解决方案2
1 已采纳 2020-08-15 01:34:31