CODEWITHSUNDEEP
javascripthtmlcsscalculator
Agnut.
Agnut.

Reputation: 15

Basic calculator, how to make buttons input value to text field

I am beginner with JavaScript, I am doing this basic calculator, finally managed to make it look the way I want, but I am really struggling on how to make buttons "work" - input their value into text field. I can use only JavaScript for this. Tried figuring it out by googling, but there's something I don't understand, because I tried several ways and it still doesn't work. Please help me on this and explanation would be highly appreciated, since I want to understand it as well :)

HTML:

<div class="calculator">
<div class="screen"><input type=text name="display" id="display" 
disabled></div>
<div><input type="button" name= "seven" value="7"></div>
<div><input type="button" name="eight" value="8"></div>
<div><input type="button" name="nine" value="9"></div>
<div><input type="button" name="divide" value="/"></div>
<div><input type="button" name="four" value="4"></div>
<div><input type="button" name="five" value="5"></div>
<div><input type="button" name="six" value="6"></div>
<div><input type="button" name="multiply" value="*"></div>
<div><input type="button" name="one" value="1"></div>
<div><input type="button" name="two" value="2"></div>
<div><input type="button" name="three" value="3"></div>
<div><input type="button" name="minus" value="-"></div>
<div><input type="button" name="clear" value="C"></div>
<div><input type="button" name="zero" value="0"></div>
<div><input type="button" name="equal" value="="></div>
<div><input type="button" name="plus" value="+"> </div>
</div>

CSS:

.calculator {
display: grid;
grid-template-rows: 35px 35px 35px 35px 35px;
grid-template-columns: 35px 35px 35px 35px;
}
.screen {
grid-column-start: 1;
grid-column-end: 5;
}
input[type="button"] {
width: 35px;
height: 35px;
}
input[type="text"] {
width: 140px;
height: 35px;
}

Upvotes: 0

Views: 1677

Answers (1)

CodeF0x
CodeF0x

Reputation: 2682

As a beginner, you might want to take a look at for loops and event listeners to better understand this solution.

The solution:

Add an eventListener to every of your buttons, so you can fire some function that does what the button on a "real" calculator would do.

// Get all your buttons
var buttons = document.querySelectorAll('input[type="button"');

// Get your input field
var input = document.getElementById('display');

// Add a eventListener to every button
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() { // when a button gets clicked, an function will fire
    input.value += this.value; // 'this' is the button that gets clicked. We add its value to the input field
  });
}
.calculator {
  display: grid;
  grid-template-rows: 35px 35px 35px 35px 35px;
  grid-template-columns: 35px 35px 35px 35px;
}

.screen {
  grid-column-start: 1;
  grid-column-end: 5;
}

input[type="button"] {
  width: 35px;
  height: 35px;
}

input[type="text"] {
  width: 140px;
  height: 35px;
}
<div class="calculator">
  <div class="screen"><input type=text name="display" id="display" disabled></div>
  <div><input type="button" name="seven" value="7"></div>
  <div><input type="button" name="eight" value="8"></div>
  <div><input type="button" name="nine" value="9"></div>
  <div><input type="button" name="divide" value="/"></div>
  <div><input type="button" name="four" value="4"></div>
  <div><input type="button" name="five" value="5"></div>
  <div><input type="button" name="six" value="6"></div>
  <div><input type="button" name="multiply" value="*"></div>
  <div><input type="button" name="one" value="1"></div>
  <div><input type="button" name="two" value="2"></div>
  <div><input type="button" name="three" value="3"></div>
  <div><input type="button" name="minus" value="-"></div>
  <div><input type="button" name="clear" value="C"></div>
  <div><input type="button" name="zero" value="0"></div>
  <div><input type="button" name="equal" value="="></div>
  <div><input type="button" name="plus" value="+"> </div>
</div>

Keep in mind that you will need to handle your =, +, -, /, * and C buttons differently! Otherwise you will just add their value to your input field.

Upvotes: 3

Related Questions