CODEWITHSUNDEEP
buttoncount
user2172123
user2172123

Reputation: 27

Count button in JavaScript

I want to create a small count button but don't know how to make it in JavaScript... Here's the code :

HTML

<div id="input_div">
    <input type="text" size="25" value="0" id="count">
    <input type="button" value="-" id="moins">
    <input type="button" value="+" id="plus">
</div>

It must increase AND decrease the number in the input[type=text] when click on the -/+ button.

Can someone help me ?

Upvotes: 1

Views: 5187

Answers (5)

scraaappy
scraaappy

Reputation: 2886

in this case, I use input type range that display a slider : <input type="range" id="myInputRange" value="15" min="0" max="50" step="1" onchange="document.getElementById('output').textContent=value" ><span id="output">15</span> (instead of input type number that is not supported by IE)

Upvotes: 0

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

DEMO FIDDLE FOR JAVASCRIPT

code html -

<div id="input_div">
 <input type="text" size="25" value="0" id="count" />
 <input type="button" value="-" id="minus" onClick = "doMinus();" />
 <input type="button" value="+" id="plus" onClick = "doPlus();" />
</div>

code javaScript -

function doMinus(){
 document.getElementById("count").value = --document.getElementById("count").value;
}

function doPlus(){
 document.getElementById("count").value = ++document.getElementById("count").value;
}

jQuery Version

DEMO FIDDLE FOR JQUERY

code html -

<div id="input_div">
  <input type="text" size="25" value="0" id="count" />
  <input type="button" value="-" id="minus" />
  <input type="button" value="+" id="plus" />
</div>

code jQuery - 

$('#minus').click(function(){
  $("#count").val(parseInt($("#count").val())-1);
});
$('#plus').click(function(){
  $("#count").val(parseInt($("#count").val())+1);
});

Upvotes: 2

crush
crush

Reputation: 17023

This seems pretty simple.

(function() {
    var count = 0;

    var minusButton = document.getElementById("moins");
    var plusButton  = document.getElementById("plus");
    var countBox    = document.getElementById("count");

    minusButton.onclick = function(e) {
        countBox.value = --count;
    };

    plusButton.onclick = function(e) {
        countBox.value = ++count;
    };
})();

Upvotes: -2

Ninad
Ninad

Reputation: 1871

U can write some script as shown 

<script>            
            function increase(){
                var a = 1;
                var textBox = document.getElementById("count");
                textBox.value = a;
                a++;
            }            
        </script>

<body>
        <button type="button" onclick="increase()">+</button>
        <input type="text" id="text">
    </body>

similarly u can do it for - decrease button

Upvotes: 0

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276496

You'd need two things.

  • Variables - which are the way to store information in JavaScript
  • Event handlers, which are the way to react to events in JavaScript

First, let's create a script tag, and put a JavaScript count variable in it, we'll put it in the bottom of our body tag:

<script>
    var count = 0;
</script>

Now, we want to create a handler, that is something that executes whenever the plus and minus signs are clicked

<script>
    var count = 0;
    function plus(){
        count++;
    }
    function minus(){
        count--;
    }
</script>

We've created two functions to call when the buttons are clicked, but we do not update the value in the HTML, or call them yet, let's update the value in the HTML.

We'll do so by document.getElementByID for the element to update and then change its value. Our script tag should look something liks this:

<script>
    var count = 0;
    var countEl = document.getElementById("count");
    function plus(){
        count++;
        countEl.value = count;
    }
    function minus(){
        count--;
        countEl.value = count;
    }
</script>

One last thing, we need to tell the elements in the DOM to execute those handlers.

<div id="input_div">
    <input type="text" size="25" value="0" id="count">
    <input type="button" value="-" id="moins" onclick="minus()">
    <input type="button" value="+" id="plus" onclick="plus()">
</div>

We've added them as event handlers to the DOM reacting to a click on the buttons, completing the task.

Now, here are some things we can improve:

  • We can use addEventListener to avoid polluting our DOM, and create unobtrusive JavaScript.
  • We can use a more advanced tool like KnockoutJS to handle binding the value we have to the DOM element instead of updating it ourselves.
  • We can read Eloquent JavaScript and learn more about how the language works!

Good luck, happy JavaScripting, and happy learning :)

Upvotes: 5

Related Questions