Entonces, como puede ver en mi código, cualquier botón que haga clic en él se enviará a la consola. Quiero que se muestre en el tipo de entrada = "campo de texto", probablemente pierda algo de lógica donde también puedo calcular dos números entre sí. Tenga en cuenta que soy nuevo en Javascript, y este es mi primer proyecto.

Necesito que la suma se muestre en el campo de texto.

const buttons = document.querySelectorAll("input[type=button]");
const length = buttons.length;
for (let i = 0; i < length; i++) {
  buttons[i].addEventListener("click", handle);
}

function handle(event) {
  const value = event.target.value;
  switch (value) {
    case "+":
      console.log("+ was clicked");
      break;
    case "-":
      console.log("- was clicked");
      break;
    case "*":
      console.log("+ was clicked");
      break;
    case "/":
      console.log("/ was clicked");
      break;
    default:
      //console.log("%s was clicked", value);
      var myInput = document.getElementById("equal");
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Dizzy Calculator</title>
</head>

<body bgcolor="#b3b3cc" text="white">
  <form name="calculator">
    <h1>Calculator</h1>
    <div class="num">
      <tr>
        <td>
          <input type="button" value="1">
          <input type="button" value="2">
          <input type="button" value="3">
          <input type="button" value="+">
        </td>
      </tr>
      <br>
      <tr>
        <td>
          <input type="button" value="4">
          <input type="button" value="5">
          <input type="button" value="6">
          <input type="button" value="-">
        </td>
      </tr>
      <br>
      <tr>
        <td>
          <input type="button" value="7">
          <input type="button" value="8">
          <input type="button" value="9">
          <input type="button" value="*">
        </td>
      </tr>
      <br>
      <tr>
        <td>
          <input type="button" value="/">
          <input type="button" value="0">
          <input type="reset" value="Reset">
        </td>
      </tr>
      <br>
      <input type="button" value="=" id="equal" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
      <br>Solution is <input type="textfield" name="ans" value="">
    </div>
  </form>
</body>

</html>
2
Zagros 17 sep. 2019 a las 16:45

3 respuestas

La mejor respuesta

Primero agregaría una ID a su campo de texto.

<input id="textfield" type="text" name="ans" value="">

Luego agregue un código para agregar los números en los que hace clic al campo de texto.

default:
  //console.log("%s was clicked", value);
  var myInput = document.getElementById("equal");

  // add value of button to textfield
  document.getElementById("textfield").value += value;

También debe agregar código para manejar las matemáticas. Intenta usar el código anterior y publica si te quedas atascado.

2
Emil 17 sep. 2019 a las 14:10

Puedes hacerlo así. Reemplace su código con el mío.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
   <title>Dizzy Calculator</title>
</head>
<body bgcolor="#b3b3cc" text="white">
   <form name="calculator">
   <h1>Calculator</h1>
   <div class="num">
       <tr>
           <td>
               <input type="button" id="1" value="1">
               <input type="button" id="2" value="2">
               <input type="button" id="3" value="3">
               <input type="button" id="plus" value="+">
           </td>
       </tr>
       <br>
       <tr>
           <td>
               <input type="button" id="4" value="4">
               <input type="button" id="5" value="5">
               <input type="button" id="6" value="6">
               <input type="button" id="minus" value="-">
           </td>
       </tr>
       <br>
       <tr>
           <td>
               <input type="button" id="7" value="7">
               <input type="button" id="8" value="8">
               <input type="button" id="9" value="9">
               <input type="button" id="mult" value="*">
           </td>
       </tr>
       <br>
       <tr>
           <td>
               <input type="button" id="divide" value="/">
               <input type="button" id="0" value="0">
               <input type="reset" value="Reset">
           </td>
       </tr>
   <br>
       <input type="button" value="=" id="equal" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
     <br>Solution is <input type="textfield" name="ans" value="" id="ans">
   </div>
   </form>
   <script>
       const buttons = document.querySelectorAll("input[type=button]");
       const length = buttons.length;
       for (let i = 0; i < length; i++)
           {
               buttons[i].addEventListener("click", handle);
           }
       function handle(event)
       {
           const value = event.target.value;
           switch(value)
           {
               case "+":
                   console.log("+ was clicked");
                   break;
               case "-":
                   console.log("- was clicked");
                   break;
               case "*":
                   console.log("+ was clicked");
                   break;
               case "/":
                   console.log("/ was clicked");
                   break;
               default:
               //console.log("%s was clicked", value);
               var myInput = document.getElementById("equal");
           }
       }
       $('#1').click(function(){
           $("#ans").val($('#ans').val() + 1);
       });
$('#2').click(function(){
 $("#ans").val($('#ans').val() + 2);
});
$('#3').click(function(){
 $("#ans").val($('#ans').val() + 3);
});
$('#4').click(function(){
 $("#ans").val($('#ans').val() + 4);
});
$('#5').click(function(){
 $("#ans").val($('#ans').val() + 5);
});
$('#6').click(function(){
 $("#ans").val($('#ans').val() + 6);
});
$('#7').click(function(){
 $("#ans").val($('#ans').val() + 7);
});
$('#8').click(function(){
 $("#ans").val($('#ans').val() + 8);
});
$('#9').click(function(){
 $("#ans").val($('#ans').val() + 9);
});
$('#0').click(function(){
 $("#ans").val($('#ans').val() + 0);
});
$('#plus').click(function(){
 $("#ans").val($('#ans').val() + "+");
});
$('#minus').click(function(){
 $("#ans").val($('#ans').val() + "-");
});
$('#divide').click(function(){
 $("#ans").val($('#ans').val() + "/");
});
$('#mult').click(function(){
 $("#ans").val($('#ans').val() + "*");
});
   </script>
</body>
-1
Foram Trada 17 sep. 2019 a las 14:09

Dulce una calculadora!

Parece que está utilizando una entrada para mostrar contenido, recomendaría usar otra cosa, intente hacer un

Elemento.

Déle al elemento que eligió una ID y use

document.getElementById("idOfElement").innerHTML = varaibleToDisplay; 

IdOfElement debería ser su ID de elementos. variableToDisplay es la variable que desea mostrar en el elemento

-1
sao 17 sep. 2019 a las 14:08