1

Estou com um problema no projeto de uma calculadora que estou desenvolvendo

Tudo da calculadora funciona, menos na hora de imprimir os valores no input de tela: os valores aparecem e desaparecem em menos de 1 segundo, deixando o input em branco.

Segue o código usado:

function putNum(num){
    document.getElementById('tela').value = document.getElementById('tela').value + num;
}

function limpar(){
   document.getElementById('tela').value = document.getElementById('tela').value = " ";
}

function oper(oprt){
    if(document.getElementById('tela').value != ""){
        document.getElementById('tela').value = document.getElementById('tela').value + oprt;
    } else {
        alert('Antes de realizar operações, digite um número')
    }
}

function result(){
    document.getElementById('tela').value = eval(document.getElementById('tela').value);
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora com Botões</title>
    <script type='text/javascript' src='calculadora-botoes.js'></script>
</head>
<body>
  <main>
      <form>
          <div id='calculadora'>
                <div id='cabecalho'>
                    <input type="textarea" name="tela" id="tela" maxlength="18">
                    <input type="submit" id="resul" value="=" onclick='result()'>
                </div>

                <table>
                    <tr> <!--Operadores-->
                        <td>
                            <input type="button" id="c" value="C" onclick='limpar()'>
                        </td>
                        <td>
                            <input type="button" class='oper' value="+" onclick='oper("+")'>
                        </td>
                        <td>
                            <input type="button" class='oper' value="-" onclick='oper("-")'>
                        </td>
                        <td>
                            <input type="button" class='oper' value="*" onclick='oper("*")'>
                        </td>
                        <td>
                            <input type="button" class='oper' value="/" onclick='oper("/")'>
                        </td>
                    </tr>

                    <tr><!--Números-->
                        <td></td>
                        <td>
                            <input type="button" class='num' value="1" onclick='putNum(1)'>
                        </td>
                        <td>
                            <input type="button" class='num' value="2" onclick='putNum(2)'>
                        </td>
                        <td>
                            <input type="button" class='num' value="3" onclick='putNum(3)'>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <input type="button" class='num' value="4" onclick='putNum(4)'>
                        </td>
                        <td>
                            <input type="button" class='num' value="5" onclick='putNum(5)'>
                        </td>
                        <td>
                            <input type="button" class='num' value="6" onclick='putNum(6)'>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <input type="button" class='num' value="7" onclick='putNum(7)'>
                        </td>
                        <td>
                            <input type="button" class='num' value="8" onclick='putNum(8)'>
                        </td>
                        <td>
                            <input type="button" class='num' value="9" onclick='putNum(9)'>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <input type="button" class='num' value="0" onclick='putNum(0)'>
                        </td>
                    </tr>
                </table>
          </div>
      </form>
  </main>
</body>
</html>

2
  • Não precisa usar form no código já que vc não vai enviar nada pro servidor.
    – Sam
    Commented 13/02/2020 às 21:35
  • 2
    O problema está no botão = que está submetendo o form. Troque o type pra type="button".
    – Sam
    Commented 13/02/2020 às 21:36

2 Respostas 2

2

Como o SAM disse nos comentários basta trocar o tipo do botão.

O que acontece é que quando click ocorre o navegador tenta enviar o formulário ao servidor.

Onde esta:

<input type="submit" id="resul" value="=" onclick='result()'>

Faça:

<input type="button" id="resul" value="=" onclick='result()'>
0

O problema está na falta de alguma configuração para travar o envio do formulário.

Isso significa que, quando tem um <input> do tipo type="submit" ele vai enviar essas informações para uma próxima página, como esse botão não está em fomulário ele está redirecionando para a própria página, olhe a URL que está sendo carregada http://www.exemplo.com/?tela=123456 essa parte do texto ?tela=123456 significa que você está fazendo um envio por GET.

Mas não se preocupe com esse termos se estiver complicado, seu problema é simples de resolver, você pode fazer é trocando os <input> por botões de link, já que não é um formulário, e colocando o um elemento de link <a aria-label="botão com valor 1">.

Seu codigo em HTML vai ficar algo parecido com isso:

<!-- HTLML -->
<a id="resul" href="#" aria-label="Botão de valor 1" onclick="funcao()">Exemplo de botão</a>

E seu código javascript vai ficar assim:

//javasctipt
function funcao(){

    console.log("CLICK");

}

Caso seja seja mais simples para resolver seu problema você pode alterar o type de submit para um simples button, nas boas praticas eu não recomendo isso, mas já que é para estudo, você pode alterar para não perder tempo re-escrevendo seu código.

9
  • 2
    Não tem porque interceptar e matar o evento submit, quando basta apenas trocar o tipo de botão. Commented 28/02/2020 às 14:44
  • Se isso ajuda, geralmente é interceptado para que não carregue a página, como em formulários de cadastro ou de informações, assim a página fica dinâmica, então vou adaptar minha resposta para que ta ajude. Commented 28/02/2020 às 14:46
  • 1
    Eu preciso? Não cara, você está equivocado. Eu disse que não havia necessidade de interceptar e matar evento, inclusive você não foi negativado, imgur.com/a/5JavG3m, eu havia dado um upvote na sua primeira versão de resposta mas conforme foi mudando ficou fora de propósito tanto que eu tive escrever uma resposta para não confundir o AP e acabei removendo o voto a favor e estou pensando em negativá-la por ter transformado uma coisa simples em algo tão cunfuso. Commented 28/02/2020 às 15:18
  • 1
    Independente do motivo (se foi reclamação, desabafo ou o que for), discussões sobre o funcionamento do site (incluindo votos e suas motivações, etc) devem ser feitas no Stack Overflow em Português Meta, por isso eu removi o comentário da sua resposta. Mas antes eu sugiro que faça uma pesquisa lá no meta, pois essa questão de votos negativos e reclamações variadas já foi discutida várias vezes. Exemplo: pt.meta.stackoverflow.com/q/652/112052 (mas se buscar lá vai encontrar vários outros)
    – hkotsubo
    Commented 28/02/2020 às 15:50
  • 1
    Só quero adiantar que nem sempre o negativo é de "quem não sabe responder". Na verdade os motivos podem ser diversos (o comentário acima do Augusto, por exemplo, ele disse que pensou em negativar e explicou o motivo - que vc pode até discordar, mas veja que o motivo não é "eu não sei responder", tanto que ele até escreveu uma resposta). Enfim, não vou me alongar porque esse tipo de discussão deve ser feita no Stack Overflow em Português Meta (só quis "dar um pitaco" aqui, mas se quiser abrir a discussão no meta, nos falamos lá)
    – hkotsubo
    Commented 28/02/2020 às 15:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .