Javascript calculator select operation type

Question

I’m having a problem with this calculator, the first image works correctly, but in the second image I’m not getting the type of arithmetic operation.

Follow the code from the second image.

function calcular() {
  var tn1 = window.document.getElementById('txtn1')
  var tn2 = window.document.getElementById('txtn2')
  var operacao = window.document.getElementById('operacao')
  var resultado = window.document.getElementById('resultado')
  var n1 = Number(tn1.value)
  var n2 = Number(tn2.value)
  if (operacao == 'Soma') {
    var s = n1 + n2
  }


  resultado.innerHTML = `A ${operacao} entre ${n1} e ${n2} é igual a ${s}`
}

<div id="area" name="area">
  <h2>CALCULANDO VALORES...</h2>
  <input type="number" name="textn1" id="txtn1" placeholder="Primeiro Valor">
  <input type="number" name="textn2" id="txtn2" placeholder="Segundo Valor">
  <label for="operacao">Selecione a operação:</label>
  <select name="operacao" id="operacao">
    <option value="adicao">Adição</option>
    <option value="subtracao">Subtração</option>
    <option value="multiplicacao">Multiplicação</option>
    <option value="divisao">Divisão</option>
  </select>


  <!-- <input name="calcular" type="button" value="Soma" onclick="soma()">
        <input name="calcular" type="button" value="Sutração" onclick="subtracao()">
        <input name="calcular" type="button" value="Multiplicação" onclick="multiplicacao()">
        <input name="calcular" type="button" value="Divisão" onclick="divisao()">-->
  <input name="calcular" type="button" value="Calcular" onclick="calcular()">
  <div id="resultado" name="resultado">Resultado</div>

</div>

Answer 1

What is missing in your code to solve the problem is getting the value of select to make the comparison.

The method getElementById returns the element reference through of its ID, the element being a reference to an object Element, or null if an item with the specified ID is not contained in this document.

The class Element provides some methods and properties that are useful when we are manipulating your objects and in this case we will use the property value to obtain the selected value of select.

function calcular() {
  var tn1 = window.document.getElementById('txtn1');
  var tn2 = window.document.getElementById('txtn2');

  var operacao = window.document.getElementById('operacao');
  var resultado = window.document.getElementById('resultado');

  var n1 = Number(tn1.value);
  var n2 = Number(tn2.value);

  var operador = operacao.value; //Obtendo o valor do <option> selecionado
  if (operador == 'adicao') {
    var s = n1 + n2;
  }
  if (operador == 'subtracao') {
    var s = n1 - n2;
  }
  if (operador == 'multiplicacao') {
    var s = n1 * n2;
  }
  if (operador == 'divisao') {
    var s = n1 / n2;
  }


  resultado.innerHTML = `A ${operador} entre ${n1} e ${n2} é igual a ${s}`
}

<div id="area" name="area">
  <h2>CALCULANDO VALORES...</h2>
  <input type="number" name="textn1" id="txtn1" placeholder="Primeiro Valor">
  <input type="number" name="textn2" id="txtn2" placeholder="Segundo Valor">
  <label for="operacao">Selecione a operação:</label>
  <select name="operacao" id="operacao">
    <option value="adicao">Adição</option>
    <option value="subtracao">Subtração</option>
    <option value="multiplicacao">Multiplicação</option>
    <option value="divisao">Divisão</option>
  </select>
  <input name="calcular" type="button" value="Calcular" onclick="calcular()">
  <div id="resultado" name="resultado">Resultado</div>

</div>

Observing: Note that the comparison strings (adicao, subtracao, multiplicacao and divisao) are equal to the values of the options that make up your select. That is, when you select an element option select, the value of select is defined by the attribute value of the element option selected.