CODEWITHSUNDEEP
javascripthtml
maub98
maub98

Reputation: 33

Calculator is not showing the results on console HTML/JS

I'm making a simple and different calculator with HTML/JS but I don't know why it doesn't appear the result on the console.

I already try different things but nothing. I'm new on this. The code is in Spanish/English

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>

Upvotes: 0

Views: 424

Answers (2)

Always Helping
Always Helping

Reputation: 14570

There are a few issues in your code.

  1. You are not using click event to call your function
  2. You have not defined op in your function
  3. You have added console log inside the function which means you are calling the function while in function. Which will not work.

I have fixed up everything for you! You could use an onClick function to pass your calculation as an arguments to your function operations and check what is being passed with switch and case

Also, to get the values of the input number enter you need to use parseInt() so that the strings are converted into number format.

In addition you need to make sure that values are entered in the value otherwise the click function will display NaN. To avoid that we can use isNan function to make sure there is a value for calculations. If there is no value you can just display a message saying please enter a value.

Full Working Demo:

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>

Upvotes: 1

Weilory
Weilory

Reputation: 3101

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>

take a look at document.write()

Upvotes: 2

Related Questions