CODEWITHSUNDEEP
javascripthtmlfunctionbutton
theusualfellow
theusualfellow

Reputation: 43

How to add the value of buttons when I click them separately?

I was making some buttons which I wanted to have some values in integers. And I wanted them to show the values in a textbox below them when I click on the button. And once I click the second button, it's value should get added to the first once and displayed in the textbox. And this should go on for all buttons. So basically it's kind of a calculator but instead of having a separate + sign, I just want to click the buttons and have their values added and displayed in the textbox.

Here's the javascript that I tried to use. 

var m1;
var m2;
var m3;
var m4;
var m5;
var m6;


function f1(){

 m1=1;
 }
function f2(){

m2=5; 
}
function f3(){


 m3=10;
}
function f4(){

 m4=20
}
function f5(){

  m5=50;
}
function f6(){ 
m6=100;
}

function ff(){
document.getElementById("total").value=m1+m2+m3+m4+m5+m6;}

I put all these functions to the buttons associated (1,5,10,20,50 are the values I want to associate to my buttons). The button and text fields are as below:

<input type="button" id="1" onclick="f1(); ff();">
<input type="button" id="2" onclick="f2(); ff();">
<input type="button" id="3" onclick="f3(); ff();">
<input type="button" id="4" onclick="f4(); ff();">
<input type="button" id="5" onclick="f5(); ff();">
<input type="button" id="6" onclick="f6(); ff();">

<input type="text" id="total"">

Upvotes: 2

Views: 719

Answers (3)

McRist
McRist

Reputation: 1748

Pass the value of the button clicked as parameter and add it to the sum.

I am adding reset button, in case you want to reset the sum.

var sum = 0;

function f(val){
  sum += val;
  document.getElementById("total").value = sum;
}
function reset(){
  sum = 0;
  document.getElementById("total").value = sum;
}
<input type="button" value = "1" id="1" onclick="f(1);;">
<input type="button" value = "5" id="2" onclick="f(5); ">
<input type="button" value = "10" id="3" onclick="f(10);">
<input type="button" value = "20" id="4" onclick="f(20); ">
<input type="button" value = "50" id="5" onclick="f(50);">
<input type="button" value = "100" id="6" onclick="f(100);">

<input type="text" id="total"">
<button onclick="reset()" >Reset</button>

Upvotes: 2

user8348171
user8348171

Reputation:

You shouldn't combine dom with js, you shoud do something like. 

var m1 = 0,m2 = 0,m3 = 0,m4 = 0,m5 = 0,m6 = 0;
var result = 0;

function f1(){

 m1=1;
 }
function f2(){

m2=5; 
}
function f3(){


 m3=10;
}
function f4(){

 m4=20
}
function f5(){

  m5=50;
}
function f6(){ 
m6=100;
}

function ff(){
  result = m1+m2+m3+m4+m5+m6;
  document.getElementById("total").value= result;
}
document.getElementById("1").addEventListener("click", function (){f1(); ff();});
document.getElementById("2").addEventListener("click", function (){f2(); ff();});
document.getElementById("3").addEventListener("click", function (){f3(); ff();});
document.getElementById("4").addEventListener("click", function (){f4(); ff();});
document.getElementById("5").addEventListener("click", function (){f5(); ff();});
document.getElementById("6").addEventListener("click", function (){f6(); ff();});
<input type="button" id="1">
<input type="button" id="2">
<input type="button" id="3">
<input type="button" id="4">
<input type="button" id="5">
<input type="button" id="6">

<input type="text" id="total"">

Upvotes: 1

shubhendu madhukar
shubhendu madhukar

Reputation: 202

You might want to modify your functions as :

function f1(){
    m1=1;
    document.getElementById('total').value =  
    document.getElementById('total').value + m1
}

I don't suppose you'd need the function ff().

This way the value in your text box is always updated depending on which button you click.

Upvotes: 0

Related Questions