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 ?
You'd need two things.
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:
addEventListener to avoid polluting our DOM, and create unobtrusive JavaScript.Good luck, happy JavaScripting, and happy learning :)
addEventListener which I linked to.addEventListener and not the onclick attribute which both of us used in our solution, it would complicate things needlessly. For example, if OP forgot to put the script at the bottom of his body, it wouldn't work.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
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);
});
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
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)
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;
};
})();
