Skip to main content
adicionou 501 caracteres ao conteúdo; título editado
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

Valor de cálculo desaparecendo JS

Olá, estouEstou com um problema no projeto de uma calculadora que estou desenvolvendo, só para praticar o JS. 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:

<!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>

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.

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);
}

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>

Valor de cálculo desaparecendo JS

Olá, estou com um problema no projeto de uma calculadora que estou desenvolvendo, só para praticar o JS. 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:

<!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>
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);
}

Valor de cálculo desaparecendo

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>

Fonte Link

Valor de cálculo desaparecendo JS

Olá, estou com um problema no projeto de uma calculadora que estou desenvolvendo, só para praticar o JS. 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:

<!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>
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);
}