HTML button adds numbers in textfield in Javascript

Question

What I am trying is the following : I have 2 buttons and one textfield (code you see below) On the buttons there is a value on it : 0,20 and 0,05. When you press one of the buttons the value should be displayed in the textfield and when you press one of those buttons again the value should be added to the current value. Here is the code I have at the moment :

<input id="bedraggroot" type="button"  value="0.20" onClick="b();">   
<input  id="bedragklein" type="button" value= "0.05" onClick="b();">

<p> Ingeworpen : <span id="toonbedrag"> Ingeworpen </span></p>

function b()
{
var bedrag1 = parseFloat(document.getElementById('bedraggroot').value);
var bedrag2 = parseFloat(document.getElementById('bedragklein').value);
var totaalbedrag;

if(bedrag1 == 0)
  {
    parseFloat(totaalbedrag)+ bedrag2;
  }

if(bedrag2 == 0)
  {
    parseFloat(totaalbedrag) = totaalbedrag + bedrag1;
    tussenbedrag = tussenb
  }



document.getElementById('toonbedrag').innerHTML = totaalbedrag;
}

I already tried al bunch of stuff but nothing seem to work what I try. without the parseFloat, with a + before it. (Read all those things in these forums) Can someone help me out?

As you might know, I am just a beginner in these things.

Kind regards.

Community · Accepted Answer · 2017-05-23 12:28:13Z

1

Instead of doing the if conditions, you should pass the button values to the function "b" (you should use more definitive names for the functions).

You are also doing the calculation wrong. "a + b" doesn't really store the result of the calculation, but "a = a + b;" does.

<input id="bedraggroot" type="button"  value="0.20" onClick="b(this.value);">   
<input  id="bedragklein" type="button" value= "0.05" onClick="b(this.value);">

<p> Ingeworpen : <span id="toonbedrag"> Ingeworpen </span></p>

<script>

var totaalbedrag = 0;

function b(bedrag)
{

    totaalbedrag = parseFloat(bedrag) + totaalbedrag; 
    document.getElementById('toonbedrag').innerHTML = totaalbedrag.toFixed(2);

}

</script>

"toFixed" removes the issue with float decimal rounding, described here: Javascript, weird floating point number endless decimal?

Try it out in here in jsfiddle

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Mar 15, 2015 at 11:11

Jaakko Karhu

2,3965 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaakko Karhu Over a year ago

Oh shoot, I was like 3 minutes late.

DVLanleyC Over a year ago

thanks!! this does the trick! love the quick replies always here on this website! I keep on learning

jlowcs · Accepted Answer · 2015-03-15 10:50:11Z

1

lots of issues here. You're not assigning parseFloat(totaalbedrag)+ bedrag2; and you're assigning something to the expression parseFloat(totaalbedrag) which should definitely fail and display something in the console.

Finally, you're assigning tussenb to tussenbedrag but neither was defined.

answered Mar 15, 2015 at 10:50

jlowcs

1,9331 gold badge11 silver badges16 bronze badges

Comments

James Tyas · Accepted Answer · 2015-03-15 10:51:43Z

1

If the code you show above is complete - you're missing the script tag to mark it as code. See http://www.w3schools.com/html/html_scripts.asp

answered Mar 15, 2015 at 10:51

James Tyas

113 bronze badges

Comments

Anto S · Accepted Answer · 2015-03-15 11:08:31Z

0

Please try below

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery 3D Falling Leaves Demo</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
</head>
<body>
<input id="bedraggroot" type="button"  value="0.20" onClick="b(this.value);">
<input  id="bedragklein" type="button" value= "0.05" onClick="b(this.value);">
<p> Ingeworpen :
  <input type="text" id="toonbedrag" value="0.0" />
</p>
<script>
function b(value)
{
var prevTotal = $('#toonbedrag').val();

var total=parseFloat(prevTotal) + parseFloat(value);
 $('#toonbedrag').val(total.toFixed(2));
}
</script>
</body>
</html>

answered Mar 15, 2015 at 11:08

Anto S

2,4576 gold badges36 silver badges52 bronze badges

3 Comments

DVLanleyC Over a year ago

Thanks alot for the answer! but I am learning Javascript at the moment. (Even though those 2 are very close together)

Anto S Over a year ago

@user3742078 What do you mean? Is it working fine or any correction needed?

Anto S Over a year ago

@user3742078 understand.. leave it

Collectives™ on Stack Overflow

HTML button adds numbers in textfield in Javascript

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related