-1

Estou fazendo uma calculadora em javascript, porém travei em como posso pegar os botões desta calculadora para usa-los em javascript.

Segue código HTML da calculadora.

<table>
<tr>
    <td><input type="button" class="num" value="9"></td>
    <td><input type="button" class="num" value="8"></td>
    <td><input type="button" class="num" value="7"></td>
    <td><input type="button" class="oper" value="/"></td>
</tr>
<tr>
    <td><input type="button" class="num" value="6"></td>
    <td><input type="button" class="num" value="5"></td>
    <td><input type="button" class="num" value="4"></td>
    <td><input type="button" class="oper" value="-"></td>
</tr>
<tr>
    <td><input type="button" class="num" value="3"></td>
    <td><input type="button" class="num" value="2"></td>
    <td><input type="button" class="num" value="1"></td>
    <td><input type="button" class="oper" value="+"></td>
</tr>
<tr>
    <td><input type="button" class="num" value="0"></td>
    <td><input type="button" class="num" value="="></td>
    <td><input type="button" class="num" value="C"></td>
    <td><input type="button"  class="oper" value="*"></td>
</tr>

2 Respostas 2

2

Uma forma de fazer seria capturar todos os botões, em seguida iterar por eles e condicionar as ações de acordo com os valores dos botões.

Por exemplo:

const buttons = document.querySelectorAll('input[type=button]')

buttons.forEach(button => {
  button.addEventListener('click', e => {
    console.log(button.value)
  })
})
<table>
<tr>
    <td><input type="button" class="num" value="9"></td>
    <td><input type="button" class="num" value="8"></td>
    <td><input type="button" class="num" value="7"></td>
    <td><input type="button" class="oper" value="/"></td>
</tr>
<tr>
    <td><input type="button" class="num" value="6"></td>
    <td><input type="button" class="num" value="5"></td>
    <td><input type="button" class="num" value="4"></td>
    <td><input type="button" class="oper" value="-"></td>
</tr>
<tr>
    <td><input type="button" class="num" value="3"></td>
    <td><input type="button" class="num" value="2"></td>
    <td><input type="button" class="num" value="1"></td>
    <td><input type="button" class="oper" value="+"></td>
</tr>
<tr>
    <td><input type="button" class="num" value="0"></td>
    <td><input type="button" class="num" value="="></td>
    <td><input type="button" class="num" value="C"></td>
    <td><input type="button"  class="oper" value="*"></td>
</tr>

1
  • Muito obrigado, me ajudou muito! Commented 30/09/2020 às 23:42
0

Boa noite, Lucas!

Eu sei que você quer exercitar, portanto vou colocar uma idéia de como você poderia fazer:

Você pode colocar uma função para cada Input e pegar da seguinte forma:

<!DOCTYPE html>
<html>
<body>

<table>
<tr>
    <td><input type="button" class="num" value="9" onclick="pegarValor(9)"></td>
    <td><input type="button" class="num" value="8" onclick="pegarValor(8)"></td>
    <td><input type="button" class="num" value="7" onclick="pegarValor(7)"></td>
    <td><input type="button" class="oper" value="/"></td>
</tr>
<tr>
    <td><input type="button" class="num" value="6"></td>
    <td><input type="button" class="num" value="5"></td>
    <td><input type="button" class="num" value="4"></td>
    <td><input type="button" class="oper" value="-"></td>
</tr>
<tr>
    <td><input type="button" class="num" value="3"></td>
    <td><input type="button" class="num" value="2"></td>
    <td><input type="button" class="num" value="1"></td>
    <td><input type="button" class="oper" value="+"></td>
</tr>
<tr>
    <td><input type="button" class="num" value="0"></td>
    <td><input type="button" class="num" value="="></td>
    <td><input type="button" class="num" value="C"></td>
    <td><input type="button"  class="oper" value="*"></td>
</tr>

<p id="visualizador">0</p>

<script>

function pegarValor(valor) {
    document.getElementById("visualizador").innerHTML = valor;
}
</script>

</body>
</html>

Espero ter ajudado! Abraço

1
  • Muito obrigado, me ajudou muito! Commented 30/09/2020 às 23:42

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