lipelopeslage/resolucao_joao.html

## resolucao_joao.html
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title></title>
</head>
<body>
 n1: <input id="n1" type="text"><br>
 n2: <input id="n2" type="text"><br>

<ul>
  <li onclick="clicaLista(this);">Somar</li>
  <li onclick="clicaLista(this);">Dividir</li>
  <li onclick="clicaLista(this);">Subtrair</li>
  <li onclick="clicaLista(this);">Multiplicar</li>
</ul>
  <button id="botao" onclick="operacao(this)" > </button>
</body>

<script>
  function clicaLista(elemento){
  // isolo a ação (vinda do item de lista) numa variável
  var acao = elemento.innerHTML;
  // separo os campos
  var n1 = document.getElementById("n1").value;
  var n2 = document.getElementById("n2").value;
  // identifico o botao
  var button = document.getElementById("botao");

  // se os números forem válidos
  if(n1 != "" && isNaN(parseInt(n1)) == false
     && n2 != "" && isNaN(parseInt(n2)) == false){
    // se for válido, e for divisao
    if(acao == "Dividir"){
      //se for valido, divisao, e n2 for 0
      if(n2 == 0){
        button.innerHTML = "limpar";
      }else{
        // se for valido, divisao e diferente de 0
        button.innerHTML = acao;
      }
    }else{
      // se nao for divisao, a validacao anterior ja basta
      button.innerHTML = acao;
    }
  }else{
    // se a validacao nao for sucedida, limpar
    button.innerHTML = "limpar";
  }
}

function operacao(elemento){
  // isolo a acao vinda do botao
  var acao = elemento.innerHTML;
  // identifico os campos
  var n1 = document.getElementById("n1");
  var n2 = document.getElementById("n2");
  // converto apenas os valores, para ficar
  // mais facil para fazer as operacoes
  var val1 = parseInt(n1.value);
  var val2 = parseInt(n2.value);

  // caso seja uma operacao, haja de acordo
  switch(acao){
    case "Dividir":
      alert(val1 / val2);
    break;
    case "Somar":
      alert(val1 + val2);
    break;
    case "Subtrair":
      alert(val1 - val2);
    break;
    case "Multiplicar":
      alert(val1 * val2);
    break;
    default:
      n1.value = "";
      n2.value = "";
  }

}
</script>
</html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8" />
	<title></title>
	</head>
	<body>
	n1: <input id="n1" type="text"><br>
	n2: <input id="n2" type="text"><br>

	<ul>
	<li onclick="clicaLista(this);">Somar</li>
	<li onclick="clicaLista(this);">Dividir</li>
	<li onclick="clicaLista(this);">Subtrair</li>
	<li onclick="clicaLista(this);">Multiplicar</li>
	</ul>
	<button id="botao" onclick="operacao(this)" > </button>
	</body>

	<script>
	function clicaLista(elemento){
	// isolo a ação (vinda do item de lista) numa variável
	var acao = elemento.innerHTML;
	// separo os campos
	var n1 = document.getElementById("n1").value;
	var n2 = document.getElementById("n2").value;
	// identifico o botao
	var button = document.getElementById("botao");

	// se os números forem válidos
	if(n1 != "" && isNaN(parseInt(n1)) == false
	&& n2 != "" && isNaN(parseInt(n2)) == false){
	// se for válido, e for divisao
	if(acao == "Dividir"){
	//se for valido, divisao, e n2 for 0
	if(n2 == 0){
	button.innerHTML = "limpar";
	}else{
	// se for valido, divisao e diferente de 0
	button.innerHTML = acao;
	}
	}else{
	// se nao for divisao, a validacao anterior ja basta
	button.innerHTML = acao;
	}
	}else{
	// se a validacao nao for sucedida, limpar
	button.innerHTML = "limpar";
	}
	}

	function operacao(elemento){
	// isolo a acao vinda do botao
	var acao = elemento.innerHTML;
	// identifico os campos
	var n1 = document.getElementById("n1");
	var n2 = document.getElementById("n2");
	// converto apenas os valores, para ficar
	// mais facil para fazer as operacoes
	var val1 = parseInt(n1.value);
	var val2 = parseInt(n2.value);

	// caso seja uma operacao, haja de acordo
	switch(acao){
	case "Dividir":
	alert(val1 / val2);
	break;
	case "Somar":
	alert(val1 + val2);
	break;
	case "Subtrair":
	alert(val1 - val2);
	break;
	case "Multiplicar":
	alert(val1 * val2);
	break;
	default:
	n1.value = "";
	n2.value = "";
	}

	}
	</script>
	</html>