How to get HTML buttons with javascript

Asked

Viewed 52 times

-1

I am making a calculator in javascript, but I have locked in how I can get the buttons of this calculator to use them in javascript.

Follow Calculator HTML code.

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

2 answers

2

One way to do it would be to capture all buttons, then iterate through them and condition actions according to button values.

For example:

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>

  • Thank you very much, you helped me a lot!

0

Good night, Lucas!

I know you want to exercise, so I’ll put an idea of how you could do:

You can put a função for each Input and take it as follows:

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

I hope I helped! Hug

  • Thank you very much, you helped me a lot!

Browser other questions tagged javascript

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