how to input value into field by using buttons? (html, js calculator)

Question

We've just started to learn Vanilla JS, we had exercise which is creating a calculator by using html, css and js.

I already created the calculator layout (I'll leave the CSS to the end), however I'm getting troubled of input the number that I want into field by using the buttons.

Basically this is my layout so far, but I have some questions about the calculator that I want.

Before I'll show you the layout, here is how I want the calculator looks like by looking at the fields:

So as you can see, in field 1 I want to input the first value, now that we entered the first value, I want to show the math action that I want to do between the 2 values, in field 3 I want to input the second value, after I inputted the value, I'll press on the equal button, the the last field will show me the result..

As I said before, I already created the layout for both fields and buttons, here is the layout:

<div class="calculator">

    <input type="text" class="calculator-screen" value="1" disabled /> <!--value 1-->
    <input type="text" class="calculator-screen" value="math action" disabled /> <!--math action-->
    <input type="text" class="calculator-screen" value="2" disabled /> <!--value 2-->
    
    <button type="button" class="equal-sign" value="=" onclick="solve()">=</button>
    <input type="text" class="result" value="result" disabled />
  
    <div class="calculator-keys">
  
      <button type="button" class="operator" value="+" onclick="dis('+')">+</button>
      <button type="button" class="operator" value="-" onclick="dis('-')">-</button>
      <button type="button" class="operator" value="*" onclick="dis('*')">*</button>
      <button type="button" class="operator" value="/" onclick="dis('/')">/</button> <br>
  
      <button type="button" value="7" onclick="dis('7')">7</button>
      <button type="button" value="8" onclick="dis('8')">8</button>
      <button type="button" value="9" onclick="dis('8')">9</button><br>
  
  
      <button type="button" value="4" onclick="dis('4')">4</button>
      <button type="button" value="5" onclick="dis('5')">5</button>
      <button type="button" value="6" onclick="dis('6')">6</button><br>
  
  
      <button type="button" value="1" onclick="dis('1')">1</button>
      <button type="button" value="2" onclick="dis('2')">2</button>
      <button type="button" value="3" onclick="dis('3')">3</button><br>
  
  
      <button type="button" value="0" onclick="dis('0')">0</button>
      <button type="button" class="decimal" value="." onclick="dis('.')">.</button>
      <button type="button" class="all-clear" value="all-clear" onclick="clr()">AC</button>        
  </div>

and my js code so far:

function dis(val) 
     { 
         document.getElementById("result").value+=val 
     } 
     
     //function that clear the display 
 function clr() 
     { 
         document.getElementById("result").value = "" 
     }

So after I did the layout and the buttons how do I make it that I'll be able to input the values by using the buttons?

in addition to that, how to I show the math action (- * / +) between the values field?

your result input have a class named result but you search it by id.. give to the input id="result" — Yosef Tukachinsky
– Yosef Tukachinsky, Commented Feb 23, 2020 at 16:52
what can i do for the rest of the this i mentioned ? im getting troubled by applying the math action into its field the the values — Moshiko
– Moshiko, Commented Feb 23, 2020 at 17:41

Max Lemieux · Accepted Answer · 2020-02-23 18:22:00Z

The way I have solved this in the past is:

Set a variable to keep track of which operand number we are working with, the first or second operand. Let's call this variable thisOperand. Set this variable to the first operand to begin with.
When a number is input at any time, check the value of thisOperand. If first append the number (which you got from the value attribute) to the first operand field, if second to the second operand field.
When the operator is chosen, if there is a first operand already entered (i.e. the display element is not empty), set thisOperand variable to value of second, so that the next numbers input are placed after the operator. Otherwise if there is no first operand entered don't do anything. If the second operand is already active, this means we've already entered an operator earlier - otherwise the second operand would not be active - so just update the operator with the new value.
When the '=' button is pressed, show the result and set thisOperand to first again. If the result is shown and a new number is pressed, run the clear function and place the number in the first operand field (as a physical calculator would).

All this is easier if you set id attributes to refer to the display fields (the ones which have value attributes of '1', 'math action' and '2' in your example above).

Collectives™ on Stack Overflow

how to input value into field by using buttons? (html, js calculator)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related