Value of calculation disappearing

Asked

Viewed 68 times

1

I have a problem in the design of a calculator I’m developing

Everything from the calculator works, except when printing the values in the input screen: the values appear and disappear in less than 1 second, leaving the input blank.

Follow the code used:

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>

javascript html

  • You don’t have to use form in the code since you will not send anything to the server.

  • 2

    The problem is in the button = who is submitting the form. Change the type to type="button".

2 answers

2


As SAM said in the comments just change the button type.

What happens is that when click occurs the browser tries to send the form to the server.

Where is:

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

Do:

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

0

The problem is in the absence of any settings to stop sending the form.

That means when you have one <input> of the kind type="submit" it will send this information to a next page, as this button is not in fomulário it is redirecting to the own page, look at the URL that is being loaded http://www.exemplo.com/?tela=123456 that part of the text ?tela=123456 means you’re making a send by GET.

But do not worry about these terms if it is complicated, your problem is simple to solve, you can do is by changing the <input> by link buttons, since it is not a form, and placing the a link element <a aria-label="botão com valor 1">.

Your HTML code will look something like this:

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

And your javascript code will look like this:

//javasctipt
function funcao(){

    console.log("CLICK");

}

If it is simpler to solve your problem you can change the type of submit for a simple button, in good practices I do not recommend this, but since it is for study, you can change not to waste time re-writing your code.

  • 2

    There is no reason to intercept and kill the Ubmit event, when just change the type of button.

  • If this helps, it is usually intercepted so that it does not load the page, as in registration forms or information, so the page becomes dynamic, so I will adapt my answer to help you.

  • Ready now I set the question to what you need and I think I answered what was happening, let me know if it answers your question, if it has satisfied you, you can close this question as a correct question.

  • 1

    Do I have to? No, man, you’re wrong. I said there was no need to intercept and kill event, even you were not negative, https://imgur.com/a/5JavG3m, i had given an upvote on its first version of response but as it was changing it got out of purpose so much that I had to write a response not to confuse the AP and I ended up removing the vote in favor and I’m thinking of negative-I was going to turn a simple thing into something so cunning.

  • I did not complain that I was negative, and I do not stand for being, if I am wrong I will be, this my post is explaining the following, 1. Because it occurs, 2. how to solve, then I commented to the people of the stack overflow to negate the questions, "Negativaram you and I went up a point", I am not angry with anyone.

  • I commented this because in every post I see there are always people who do not know how to answer and negative people’s responses. I’m sorry if this got confusing.

  • 1

    Regardless of the reason (whether it was a complaint, outburst or whatever), discussions about the operation of the site (including votes and their motivations, etc.) should be made on [meta], so I removed the comment from your reply. But first I suggest that you do a search there at the goal, because this issue of negative votes and various complaints has been discussed several times. Example: https://pt.meta.stackoverflow.com/q/652/112052. (but if you search there you will find several others)

  • 1

    I just want to say that the negative is not always "who can’t answer". In fact the reasons may be diverse (the above comment of Augustus, for example, he said that he thought in negative and explained the reason - that you may even disagree, but see that the reason is not "I do not know how to answer", so much so that he even wrote an answer). Anyway, I will not go on because this type of discussion should be done in the [meta] (I just wanted to "give a pinch" here, but if you want to open the discussion at the goal, we spoke there)

  • All right, but most of the Brazilian stack overflow questions are negative because someone did not know how to answer and left, this digrede with the community. and once again, I’m sorry if that seemed confusing.

Show 4 more comments

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.