Increase Counter Value Upon Button Click

jQuery - Increase the value of a counter when a button is clicked

You cannot use ++ on something which is not a variable, this would be the closest you can get:

$('#counter').html(function(i, val) { return +val+1 });

jQuery's html() method can get and set the HTML value of an element. If passed a function it can update the HTML based upon the existing value. So in the context of your code:

$("#update").click(function() {
    $('#counter').html(function(i, val) { return +val+1 });
}

DEMO: http://jsfiddle.net/marcuswhybrow/zRX2D/2/

When it comes to synchronising your counter on the page, with the counter value in your database, never trust the client! You send either an increment or decrement signal to you server side script, rather than a continuous value such as 10, or 23.

However you could send an AJAX request to the server when you change the HTML of your counter:

$("#update").click(function() {
    $('#counter').html(function(i, val) {
        $.ajax({
            url: '/path/to/script/',
            type: 'POST',
            data: {increment: true},
            success: function() { alert('Request has returned') }
        });
        return +val+1;
    });
}

Increase counter value upon button click

It's clear you're new to jQuery, so a good read might be of help to you, I would recommand Head First jQuery.

As for the question, I rewrote your code, here's what it should be like :

<!DOCTYPE html>
<html>
    <head>
        <title> My first increment </title>
    </head>
    <body>

        <input type="text" name="TextBox" id="TextBox" value="0" />
        <input type="Button" id='AddButton' value="+" />

        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#AddButton').click( function() {
                    var counter = $('#TextBox').val();
                    counter++ ;
                    $('#TextBox').val(counter);
                });
            });
        </script>
    </body>
</html>

Here is a little test : test me

The idea is to increment a variable not an object, and you have some syntax mistakes as well, but try this code and we can discuss it further on comments.

Best of luck.

How to Increase/Decrease Counter when button is clicked while factoring the value of a dropdown

You can use onChange to do it.

<h6 class="askclient">How Many? <a id="clicks">1</a></h6>
<button onClick="onClick()" type="button">ADD MORE</button>
<button onClick="onUnClick()" type="button">X</button>
<select id="ddlViewBy"  name="repetition[]" onChange="onChange(this)">
   <option value="0">None</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>
<script>
    var clicks = 1;
    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    function onUnClick() {
        clicks -= 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    function onChange(elem) {
        clicks += Number(elem.value);
        document.getElementById("clicks").innerHTML = clicks;
        document.getElementById("ddlViewBy").selectedIndex = 0;
    }
</script>

Using Number() is required because elem.value is string.

Force back selectedIndex to the None item. Otherwise, if the same number is selected consecutively, onChange will not fire.

How to increment counter with button click in Razor pages

Using a class on the buttons, you would walk around that issue.

From each button click, you can target the "next" input.

@foreach(var item in Model.ErrorList)
{
    <input type="button" class="incrementer" id=@item.ErrorListID value=@item.ErrorName />
    <input type="text" name="Tb+@item.ErrorListID" id="Tb+@item.ErrorListID" value="0" />
}

And then, you only need one event handler:

$(document).ready(function(){
    
    $('.incrementer').click( function() {
        let nextInput = $(this).next("input")
        let count = parseInt(nextInput.val()) + 1
        nextInput.val(count)
    });
});

Increase Counter Value Upon Button Click

jQuery - Increase the value of a counter when a button is clicked

Increase counter value upon button click

How to Increase/Decrease Counter when button is clicked while factoring the value of a dropdown

How to increment counter with button click in Razor pages

Related Topics

Leave a reply