www.webdeveloper.com
Results 1 to 3 of 3

Thread: Buttons with a counter

  1. #1
    Join Date
    Nov 2013
    Posts
    1

    Buttons with a counter

    First post here.
    The idea is to put counters on when I press the buttons. The First button I press will get 1, the second 2, etc. In the example I'm caught on the counter that is not connected to the button you press:

    http://www.aktivitetsportalen.net/test/test.html

    An example.
    When I press knapp3 first: it should write 1, knapp1: 2, knapp2: 3

    I got stuck when I want to connect the counter to the ID on the buttons. Unsure if it is possible? The question is whether it's possible to do with a function and arguments as global counters. Thanks!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257
    You could save the count as part of the button object...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    </head>
    <body>
    <button id="btn0" value="0" onclick="addCnt(this);alert(this.value)">Counter 1</button>
    <button id="btn1" value="0" onclick="addCnt(this);alert(this.value)">Counter 2</button>
    <button id="btn2" value="0" onclick="addCnt(this);alert(this.value)">Counter 3</button>
    <button id="btn3" value="0" onclick="addCnt(this);alert(this.value)">Counter 4</button>
    <button id="btn4" value="0" onclick="addCnt(this);alert(this.value)">Counter 5</button>
    
    <script type="text/javascript">
    function addCnt(cntObj) {
      var btn = document.getElementById(cntObj.id);
      btn.value = Number(btn.value)+1;
    }
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Oct 2013
    Posts
    29
    You may want to try this code:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <body>
    	<script>
    		var result = 0;
    		function add(button)
    		{
    			result++;
    			document.getElementById('result').innerHTML = result;
    		}
    	</script>
    	<div id="result"></div>
    	<button onclick="add();">Knapp 1</button>
    	<button onclick="add();">Knapp 2</button>
    	<button onclick="add();">Knapp 3</button>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles