How to display value in textfield with a calculator in Javascript

Question

So, as you can see in my code whatever button I click on it gets outputted to the console. I want it to get displayed in the input type="textfield", I probably miss some logic where I can calculate two numbers with each other too. Bare in mind that I'm new to Javascript, and this is my 1st project.

I need to get the sum displayed in textfield.

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>

First, check https://www.w3schools.com/tags/att_input_type.asp for your input type. textfield is text After that, to set and input field, check here : https://stackoverflow.com/questions/5700471/set-value-of-input-using-javascript-function — Dimitri Bosteels, Sep 17 '19 at 13:48

Emil · Accepted Answer · 2019-09-17T14:10:44.483

2

First I would add an ID to your textfield.

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

Then add some code to append the numbers you click to the textfield.

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

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

You also have to add code to handle the math. Try to use the code above, and post if you get stuck.

edited Sep 17 '19 at 14:10

answered Sep 17 '19 at 14:07

Emil

147
2
9

`type="textfield"`? – Heretic Monkey Sep 17 '19 at 14:08
@HereticMonkey Oops, I just copied OPs code. Thanks! – Emil Sep 17 '19 at 14:10
This work so far, only thing that won't display is the operators also do you have any suggestions on how I handle the math logic? – Zagros Sep 17 '19 at 14:13
Hi, I have modified the code some, check it out here: https://jsfiddle.net/mqkndyv7/1/ – Emil Sep 17 '19 at 14:23

Pushprajsinh Chudasama · Answer 2 · 2019-09-17T14:09:07.407

You can do it like this. Replace your code with mine.

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

Hi Foram, appreciate your response. Could you explain me what the $ are for. I'm new to Javascript. — Zagros, Sep 17 '19 at 14:08

score -1 · Answer 3 · answered Sep 17 '19 at 14:08

sweet a calculator!

Looks like you are using an input to display content, i would recommend using something else, try making a

element.

give the element you chose an ID and use

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

idOfElement should be your elements ID. variableToDisplay is the variable you want to display in the element

How to display value in textfield with a calculator in Javascript

3 Answers3