Erro em questão sobre JavaScript

rugier732 · 9 de junho de 2017

Boa noite, eu estava fazendo este exercicio, mas de alguma forma não estou conseguindo enviar os valores (ao clicar) de um botão para um input (estou fazendo uma simples calculadora em JS).

<html>
  <head>
    <meta charset="utf-8">
    <title>Calculadora >> </title>
    <link rel="stylesheet" href="css/calculator.css">
    <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
    <script type="text/javascript" src="js/calculator.js"></script>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="5">
          <input id="display" type="number" name="Input" placeholder="0">
        </td>
      </tr>
      <tr>
        <td><button id="btMR" type="button" name="button">MR</button></td>
        <td><button id="brMS" type="button" name="button">MS</button></td>
        <td><button id="brAbreParenteses" type="button" name="button">(</button></td>
        <td><button id="btFechaParenteses" type="button" name="button">)</button></td>
        <td><button id="btC" type="button" name="button">C</button></td>
      </tr>
      <tr>
        <td><button id="btSete" type="button" name="button">7</button></td>
        <td><button id="btOito" type="button" name="button">8</button></td>
        <td><button id="btNove" type="button" name="button">9</button></td>
        <td><button id="btDivisao" type="button" name="button">÷</button></td>
        <td><button id="btPorcentagem" type="button" name="button">%</button></td>
      </tr>
      <tr>
        <td><button id="btQuatro" type="button" name="button">4</button></td>
        <td><button id="btCinco" type="button" name="button">5</button></td>
        <td><button id="btSeis" type="button" name="button">6</button></td>
        <td><button id="btMultiplicacao" type="button" name="button">×</button></td>
        <td><button id="btInversao" type="button" name="button">1/x</button></td>
      </tr>
      <tr>
        <td><button id="btUm" type="button" name="button">1</button></td>
        <td><button id="btDois" type="button" name="button">2</button></td>
        <td><button id="btTres" type="button" name="button">3</button></td>
        <td><button id="btSubtracao" type="button" name="button">-</button></td>
        <td><button id="btRaiz" type="button" name="button">√</button></td>
      </tr>
      <tr>
        <td><button id="btPonto" type="button" name="button">.</button></td>
        <td><button id="btZero" type="button" name="button">0</button></td>
        <td><button id="btIual" type="button" name="button">=</button></td>
        <td><button id="btSomar" type="button" name="button">+</button></td>
        <td><button id="brPotencia" type="button" name="button">x²</button></td>
      </tr>
    </table>
  </body>
</html>

JS

btZero.onclick = function(){
  display.value += "0";
}
btUm.onclick = function(){
  display.value += "1";
}
btDois.onclick = function (){
  display.value += "2";
}
btTres.onclick = function (){
  display.value += "3";
}
btQuatro.onclick = function (){
  display.value += "4";
}
btCinco.onclick = function (){
  display.value += "5";
}

Sei que deve ser alguma "besteirinha", mas poderiam me ajudar?

DavidsonBruno · 11 de junho de 2017

Você precisa capturar os IDs dos elementos para manipulá-los. Depois é preciso registrar os eventos em listeners. O código do seu javascript ficaria mais ou menos assim:

var display = document.getElementById("display");
var btZero = document.getElementById("btZero");
var btUm = document.getElementById("btUm");
var btDois = document.getElementById("btDois");
var btTres = document.getElementById("btTres");
var btQuatro = document.getElementById("btQuatro");
var btCinco = document.getElementById("btCinco");
var btSeis = document.getElementById("btSeis");
var btSete = document.getElementById("btSete");

btZero.addEventListener('click', function(){
    display.value += "0";
});

btUm.addEventListener('click', function(){
    display.value += "1";
});

btDois.addEventListener('click', function(){
    display.value += "2";
});

btTres.addEventListener('click', function(){
    display.value += "3";
});

btQuatro.addEventListener('click', function(){
    display.value += "4";
});

btCinco.addEventListener('click', function(){
    display.value += "5";
});

btSeis.addEventListener('click', function(){
    display.value += "6";
});

btSete.addEventListener('click', function(){
    display.value += "7";
});

//etc.

Esqueci uma coisa: você precisa garantir que o DOM tenha sido carregado antes de manipular os elementos. Para isto, mova a chamada ao arquivo javascript no arquivo html para a linha que antecede o fechamento da tag </body>. Assim:

<script type="text/javascript" src="js/calculator.js"></script>
  </body>
</html>

Entrar

Erro em questão sobre JavaScript

Posts recomendados

rugier732

Link para o comentário

Compartilhar em outros sites

DavidsonBruno

Link para o comentário

Compartilhar em outros sites

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos