Como utilizar o Switch Case no JavaScript?

Front-end JavaScript
,
#1 
<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  Numero 1:<input id="num1" type="number"> <br />
  Numero 2:<input id="num2" type="number"> <br />
  <input type="radio" name="calc" id="soma"/> Soma<br />
 <input type="radio" name="calc" id="subtracao"/> Subtração<br />
 <input type="radio" name="calc" id="multiplicacao"/> Multiplicação<br />
 <input type="radio" name="calc" id="divisao"/> Divisão<br />
 <button onclick="main()">Calcular</button><br />
 Resposta: <div id="resp"></div>
 
 
 
 <script>
     function main()
{
 var resp = document.getElementById('resp');
 var num1 = parseFloat(document.getElementById("num1").value);
 var num2 = parseFloat(document.getElementById("num2").value);
 var texto='';

 if(document.getElementById('soma').checked)
  texto = soma(num1, num2);
 if(document.getElementById('subtracao').checked)
  texto = subtracao(num1, num2);
 if(document.getElementById('multiplicacao').checked)
  texto = multiplicacao(num1, num2);
 if(document.getElementById('divisao').checked)
  texto = divisao(num1, num2);

 resp.innerHTML = texto;
}

function soma(x, y)
{
  
  return (x+y);
}

function subtracao(x, y)
{
  
  return (x-y);
}

function multiplicacao(x, y)
{
  
  return (x*y);
}

function divisao(x, y)
{
  
  return (x/y);
}


switch (operacao){

  case 'soma':


    break;
    
    case 'sub':
      
      break;
      
      case 'mult':
        
        break;
        
        case 'div':
         
          break;
          
          default:
          console.log("Opção inválida.")
}


 </script>
 
 
 </body>
</html>

Não sei utilizar o JavaScript totalmente… Queria saber como eu faria para colocar switch case nessa situação que está no código, ao invés de usar if-else.

#2

Primeiro você precisa mudar o HTML para que cada radio tenha um valor (um atributo value):

<input type="radio" name="calc" value="soma"/> Soma<br />
<input type="radio" name="calc" value="subtracao"/> Subtração<br />
<input type="radio" name="calc" value="multiplicacao"/> Multiplicação<br />
<input type="radio" name="calc" value="divisao"/> Divisão<br />

Aí basta você pegar o radio que está marcado, e usar o valor dele no switch:

function main() {
  // radio que está marcado
  var opcao = document.querySelector('input[name=calc]:checked');
  if (! opcao) { // pode ser que nenhum esteja marcado
    console.log('Escolha uma operação');
    return; // sai da função (se nenhum foi marcado, não tem motivo pra continuar)
  }
  var resp = document.getElementById('resp');
  var num1 = parseFloat(document.getElementById("num1").value);
  var num2 = parseFloat(document.getElementById("num2").value);
  var texto;
  switch (opcao.value) {
    case 'soma':
      texto = soma(num1, num2);
      break;
    case 'subtracao':
      texto = subtracao(num1, num2);
      break;
    case 'multiplicacao':
      texto = multiplicacao(num1, num2);
      break;
    case 'divisao':
      texto = divisao(num1, num2);
      break;
    default:
      console.log('operação inválida');
      return;
  }
  resp.innerText = texto;
}
1 curtida
#3

Ainda não consegui utilizar o case, não está calculando. Desculpe, sou novo nisso.
na function eu devo colocar o nome de cada operação? (multi, divi, soma…)

#4

O que exatamente não está funcionando?

Eu só peguei o seu código e mudei o que indiquei acima (o trecho do HTML e a função). Veja aqui que funciona.

#5

Talvez tenha sido o site, dessa vez funcionou.
Muito obrigado pela ajuda.