Problema com a Tecla Enter em uma calculadora
21/09/2019
0
Olá, boa noite.
Estou fazendo uma calculadora para um trabalho, iniciei um curso a pouco tempo e ainda estou tendo algumas dificuldades.
Coloquei para a calculadora realizar o cálculo ao clicar no botão digital "=" na calculadora, no botão "=" no teclado do usuário e também o Enter.
O problema é que ao clicar Enter para realizar a conta, me parece que ela faz a conta e armazena o último valor digitado, imprimindo na tela o resultado concatenando o valor. Por exemplo, se digito 3+3 e aperto enter, o resultado saí: 69.
Estou fazendo uma calculadora para um trabalho, iniciei um curso a pouco tempo e ainda estou tendo algumas dificuldades.
Coloquei para a calculadora realizar o cálculo ao clicar no botão digital "=" na calculadora, no botão "=" no teclado do usuário e também o Enter.
O problema é que ao clicar Enter para realizar a conta, me parece que ela faz a conta e armazena o último valor digitado, imprimindo na tela o resultado concatenando o valor. Por exemplo, se digito 3+3 e aperto enter, o resultado saí: 69.
Daniel
Curtir tópico
+ 0
Responder
Posts
21/09/2019
Daniel
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Calculadora</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculadora">
<div class="display">
<input class="display_val" type="text" id="valor" placeholder="0">
</div>
<!-- Primeira linha da Calculadora -->
<div class="button">
<button class= "button_number" onclick="valor1()">1</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor2()">2</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor3()">3</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="backspace()"
ondblclick="document.getElementById('valor').value =''">clear <br>←</button>;
</div>
<div class="button_right">
<button class= "button_operation" onclick="calculo()">=</button>
</div>
<!-- Segunda linha da Calculadora -->
<div class="button">
<button class= "button_number" onclick="valor4()">4</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor5()">5</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor6()">6</button>
</div>
<div class="button_right">
<button class= "button_operation_mais" onclick="soma()">+</button>
</div>
<div class="button_right">
<button class= "button_operation_menos" onclick="subtracao()">-</button>
</div>
<!-- Terceira linha da Calculadora -->
<div class="button">
<button class= "button_number" onclick="valor7()">7</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor8()">8</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor9()">9</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="multiplicacao()">x</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="divisao()">/</button>
</div>
<!-- Quarta linha da Calculadora -->
<div class="zero">
<button class= "button_zero" onclick="valor0()">0</button>
</div>
<div class="button">
<button class= "button_number" onclick="real()">.</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="sqrt()">√</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="exp()">^</button>
</div>
</div>
</body>
<script type="text/javascript" src="funcao.js">
</script>
</html>
<html lang="pt">
<head>
<title>Calculadora</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculadora">
<div class="display">
<input class="display_val" type="text" id="valor" placeholder="0">
</div>
<!-- Primeira linha da Calculadora -->
<div class="button">
<button class= "button_number" onclick="valor1()">1</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor2()">2</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor3()">3</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="backspace()"
ondblclick="document.getElementById('valor').value =''">clear <br>←</button>;
</div>
<div class="button_right">
<button class= "button_operation" onclick="calculo()">=</button>
</div>
<!-- Segunda linha da Calculadora -->
<div class="button">
<button class= "button_number" onclick="valor4()">4</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor5()">5</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor6()">6</button>
</div>
<div class="button_right">
<button class= "button_operation_mais" onclick="soma()">+</button>
</div>
<div class="button_right">
<button class= "button_operation_menos" onclick="subtracao()">-</button>
</div>
<!-- Terceira linha da Calculadora -->
<div class="button">
<button class= "button_number" onclick="valor7()">7</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor8()">8</button>
</div>
<div class="button">
<button class= "button_number" onclick="valor9()">9</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="multiplicacao()">x</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="divisao()">/</button>
</div>
<!-- Quarta linha da Calculadora -->
<div class="zero">
<button class= "button_zero" onclick="valor0()">0</button>
</div>
<div class="button">
<button class= "button_number" onclick="real()">.</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="sqrt()">√</button>
</div>
<div class="button_right">
<button class= "button_operation" onclick="exp()">^</button>
</div>
</div>
</body>
<script type="text/javascript" src="funcao.js">
</script>
</html>
Responder
21/09/2019
Daniel
function soma(){
document.getElementById("valor").value = document.getElementById("valor").value + "+";
}
function subtracao(){
document.getElementById("valor").value = document.getElementById("valor").value + "-";
}
function multiplicacao(){
document.getElementById("valor").value = document.getElementById("valor").value + "*";
}
function divisao(){
document.getElementById("valor").value = document.getElementById("valor").value + "/";
}
function exp(){
document.getElementById("valor").value = document.getElementById("valor").value + "^";
}
function clear(){
document.getElementById("valor").value = "0";
}
function backspace(){
var valor = document.getElementById("valor").value;
valor = valor.substring(0,(valor.length - 1));
document.getElementById("valor").value = valor;
}
function valor0(){
document.getElementById("valor").value = document.getElementById("valor").value + "0";
}
function valor1(){
document.getElementById("valor").value = document.getElementById("valor").value + "1";
}
function valor2(){
document.getElementById("valor").value = document.getElementById("valor").value + "2";
}
function valor3(){
document.getElementById("valor").value = document.getElementById("valor").value + "3";
}
function valor4(){
document.getElementById("valor").value = document.getElementById("valor").value + "4";
}
function valor5(){
document.getElementById("valor").value = document.getElementById("valor").value + "5";
}
function valor6(){
document.getElementById("valor").value = document.getElementById("valor").value + "6";
}
function valor7(){
document.getElementById("valor").value = document.getElementById("valor").value + "7";
}
function valor8(){
document.getElementById("valor").value = document.getElementById("valor").value + "8";
}
function valor9(){
document.getElementById("valor").value = document.getElementById("valor").value + "9";
}
function real(){
document.getElementById("valor").value = document.getElementById("valor").value + ".";
}
function sqrt(){
document.getElementById("valor").value = document.getElementById("valor").value + "√";
}
document.querySelector('body').addEventListener('keydown', function(event) {
var tecla = event.keyCode;
if (tecla == 13) { // tecla ENTER
if (document.getElementById("valor").value == 0){
stop;
}
else{
calculo();
}
}
else if (tecla == 61) { // tecla =
if (document.getElementById("valor").value == 0){
stop;
}
else{
calculo();
}
}
});
function calculo(){
var valor = document.getElementById("valor").value;
while (valor.indexOf("√") !== -1){ //verifica se a string contém √, se não contiver ela retorna -1, por isso: !== -1
var posicao_raiz = valor.indexOf("√"); //achando a posição do caracter
var i = posicao_raiz + 1; // o próximo carac. será número
var aux = valor[i];
while (!isNaN(aux) && i < valor.length){ //enquanto aux é um número (não é NaN) e estiver dentro do valor, executa while.
i++;
aux = valor[i] //auxiliar achará quando os números acabam.
}
var valor_substring = valor.substring(posicao_raiz + 1, i); //pego o valor dentro da raiz
var valor_raiz = Math.sqrt(valor_substring);
valor = valor.replace("√" + valor_substring, valor_raiz); //faço a substituição do valor encontrado
}
while (valor.indexOf("^") !== -1){ //mesmo procedimento anterior mas para substituir o ^ por **
valor = valor.replace("^", "**");
}
document.getElementById("valor").value = eval(valor); //por fim, calcula o valor final.
}
document.getElementById("valor").value = document.getElementById("valor").value + "+";
}
function subtracao(){
document.getElementById("valor").value = document.getElementById("valor").value + "-";
}
function multiplicacao(){
document.getElementById("valor").value = document.getElementById("valor").value + "*";
}
function divisao(){
document.getElementById("valor").value = document.getElementById("valor").value + "/";
}
function exp(){
document.getElementById("valor").value = document.getElementById("valor").value + "^";
}
function clear(){
document.getElementById("valor").value = "0";
}
function backspace(){
var valor = document.getElementById("valor").value;
valor = valor.substring(0,(valor.length - 1));
document.getElementById("valor").value = valor;
}
function valor0(){
document.getElementById("valor").value = document.getElementById("valor").value + "0";
}
function valor1(){
document.getElementById("valor").value = document.getElementById("valor").value + "1";
}
function valor2(){
document.getElementById("valor").value = document.getElementById("valor").value + "2";
}
function valor3(){
document.getElementById("valor").value = document.getElementById("valor").value + "3";
}
function valor4(){
document.getElementById("valor").value = document.getElementById("valor").value + "4";
}
function valor5(){
document.getElementById("valor").value = document.getElementById("valor").value + "5";
}
function valor6(){
document.getElementById("valor").value = document.getElementById("valor").value + "6";
}
function valor7(){
document.getElementById("valor").value = document.getElementById("valor").value + "7";
}
function valor8(){
document.getElementById("valor").value = document.getElementById("valor").value + "8";
}
function valor9(){
document.getElementById("valor").value = document.getElementById("valor").value + "9";
}
function real(){
document.getElementById("valor").value = document.getElementById("valor").value + ".";
}
function sqrt(){
document.getElementById("valor").value = document.getElementById("valor").value + "√";
}
document.querySelector('body').addEventListener('keydown', function(event) {
var tecla = event.keyCode;
if (tecla == 13) { // tecla ENTER
if (document.getElementById("valor").value == 0){
stop;
}
else{
calculo();
}
}
else if (tecla == 61) { // tecla =
if (document.getElementById("valor").value == 0){
stop;
}
else{
calculo();
}
}
});
function calculo(){
var valor = document.getElementById("valor").value;
while (valor.indexOf("√") !== -1){ //verifica se a string contém √, se não contiver ela retorna -1, por isso: !== -1
var posicao_raiz = valor.indexOf("√"); //achando a posição do caracter
var i = posicao_raiz + 1; // o próximo carac. será número
var aux = valor[i];
while (!isNaN(aux) && i < valor.length){ //enquanto aux é um número (não é NaN) e estiver dentro do valor, executa while.
i++;
aux = valor[i] //auxiliar achará quando os números acabam.
}
var valor_substring = valor.substring(posicao_raiz + 1, i); //pego o valor dentro da raiz
var valor_raiz = Math.sqrt(valor_substring);
valor = valor.replace("√" + valor_substring, valor_raiz); //faço a substituição do valor encontrado
}
while (valor.indexOf("^") !== -1){ //mesmo procedimento anterior mas para substituir o ^ por **
valor = valor.replace("^", "**");
}
document.getElementById("valor").value = eval(valor); //por fim, calcula o valor final.
}
Responder
Clique aqui para fazer login e interagir na Comunidade :)
