# Count up

**URL:** https://forum.kirupa.com/t/count-up/183562
**Category:** Uncategorized
**Created:** [March 28, 2006, 8:50am UTC](https://forum.kirupa.com/t/count-up/183562 "2006-03-28T08:50:07Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![james182](https://avatars.discourse-cdn.com/v4/letter/j/278dde/32.png) [@james182](https://forum.kirupa.com/u/james182)
#### Post date: [March 28, 2006, 8:50am UTC](https://forum.kirupa.com/t/count-up/183562/1 "2006-03-28T08:50:07Z")

</div>

i am try to use javascript to count up like 1, 2, 3 … but only when a button is clicked. so each click add 1 so if the buttons been clicked 10 it should disply the number 10.  
(it is more like a Download/Click Counter)  
how would i do this???

---

<div class="post-metadata">

### Author: ![anon1712571](https://avatars.discourse-cdn.com/v4/letter/a/9dc877/32.png) [@anon1712571](https://forum.kirupa.com/u/anon1712571)
#### Post date: [March 28, 2006, 9:50am UTC](https://forum.kirupa.com/t/count-up/183562/2 "2006-03-28T09:50:52Z")

</div>

😛 lol I don’t know javascript but just use this pseudo:

name.textfield=0

if counter.Button = push  
name.textfield= name.textfield+1

😛 lol

---

<div class="post-metadata">

### Author: ![Ankou](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ankou/32/1351_2.png) [@Ankou](https://forum.kirupa.com/u/Ankou)
#### Post date: [March 28, 2006, 7:46pm UTC](https://forum.kirupa.com/t/count-up/183562/3 "2006-03-28T19:46:46Z")

</div>

```auto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title> </title>

  <script type="text/javascript">
var counter = 0;

function countUp(){
  counter++;
  document.getElementById('countUp').innerHTML = counter;
} </script>

 </head>
 <body>

  <div id="counter">
   <span id="countUp">0</span><br />
   <input type="button" name="cButton" value="Count Up" onclick="countUp()" />
  </div>

 </body>
</html>

```

It’s pretty simple really. Make sure to declare the counter variable outside of your function. Then create a function that will increase the counter variable each time the button is clicked and display it. For the button you’re just using onclick to call the function.

I didn’t know where you wanted the number displayed so I just tossed it into a span tag using getElementById(). You could just as easily use a form and text field. Like so:

```auto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title> </title>

  <script type="text/javascript">
var counter = 0;

function countUp(){
  counter++;
  document.counterForm.displayCounter.value = counter;
} </script>

 </head>
 <body>

  <form name="counterForm">
   <input type="text" name="displayCounter" value="" /> <br />
   <input type="button" name="cButton" value="Count Up" onclick="countUp()" />
  </form>

 </body>
</html>

```
