时间戳

首页 > 解决方案 > 计算器未在控制台 HTML/JS 上显示结果

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

问题描述

我正在用 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>

标签： javascripthtml

解决方案

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()

推荐阅读