Capturar value de button para um input que será o visor de uma calculadora

Front-end JavaScript
#1

Bom dia pessoal, estou tentando criar uma função em um input que será de captura para o número que eu digitar na calculadora, eu queria saber como faço para capturar os values de buttons e aparecer no input que será o visor.

Segue código que estou tentando criar:

<section>
 <h2>Projeto calculadora</h2>
 <div class="calculator">
  <input type="text" class="visor" onclick="mostra(this)">
  <form>
      <input type="button" value="0" onclick="pega()">
      <input type="button" value="1" onclick="pega()">
      <input type="button" value="2" onclick="pega()">
      <input type="button" value="3" onclick="pega()">
      <input type="button" value="+" class="operador" onclick="pega()">
      <br>
      <input type="button" value="4" onclick="pega()">
      <input type="button" value="5" onclick="pega()">
      <input type="button" value="6" onclick="pega()">
      <input type="button" value="-" class="operador" onclick="pega()">
      <br>
      <input type="button" value="7" onclick="pega()">
      <input type="button" value="8" onclick="pega()">
      <input type="button" value="9" onclick="pega()">
      <input type="button" value="X" class="operador" onclick="pega()">
      <input type="button" value="%" class="operador" onclick="pega()">
  </form>
</div>
</section>


<script> 
    
     let visor = document.getElementsByClassName('visor'),
     operador = document.querySelectorAll(".operador");
     
     function mostra(input){
       
     }
</script>
#2

Eu atribuiria um id=“visor” ao input e usaria o document.getElementById(“visor”). value para pegar o valor e adicionaria o valor nele mesmo, ficaria ± assim:

<html>
    <section>
        <h2>Projeto calculadora</h2>
        <div class="calculator">
         <input type="text" class="visor" id="visor" onclick="mostra(this)">
         <form>
             <input type="button" value="0" onclick="insere(0)">
             <input type="button" value="1" onclick="insere(1)">
             <input type="button" value="2" onclick="insere(2)">
             <input type="button" value="3" onclick="insere(3)">
             <input type="button" value="+" class="operador" onclick="insere('+')">
             <br>
             <input type="button" value="4" onclick="insere(4)">
             <input type="button" value="5" onclick="insere(5)">
             <input type="button" value="6" onclick="insere(6)">
             <input type="button" value="-" class="operador" onclick="insere('-')">
             <br>
             <input type="button" value="7" onclick="insere(7)">
             <input type="button" value="8" onclick="insere(8)">
             <input type="button" value="9" onclick="insere(9)">
             <input type="button" value="X" class="operador" onclick="insere('X')">
             <input type="button" value="%" class="operador" onclick="insere('%')">
         </form>
       </div>
       </section>
       
       
       <script> 
           function insere(num){
               document.getElementById("visor").value = document.getElementById("visor").value +num;
           }
       </script>
</html>
1 curtida
#4

Obrigado fera, usei o seu conceito e deu certo.