Help - Search - Members - Calendar
Full Version: button plus and minus script
HTMLHelp Forums > Programming > Client-side Scripting
Louffeman
Hi,
I want to create à script for a plus and minus button, I meet some difficulties,
the initial value is 0, when I click +, it increases immediately to 2, than, 2,3,4.....normally. but it can't increase to 1, than 2,3,4...
and when I click -, it decreases until to 1, not possible to 0.
I wish someone can help, and thanks a lot !

it is my script:

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

<script src="js/jquery.js"></script>
<script>
var count = 1;
var countEl = document.getElementById("count");
function plus(){
count++;
countEl.value = count;
}
function minus(){
if (count > 1) {
count--;
countEl.value = count;
}
}
</script>
CharlesEF
What you describe is exactly what you have coded to happen. You should rewrite your plus() and minus() functions. I will show you how to do 1 and I will leave the other to you.
HTML
CODE
<input type="button" value="+" id="plus" onclick="plus(parseInt(document.getElementById("count").value))">

Javascript
CODE
function plus(count){
document.getElementById("count").value = count++;
}
You don't need the line 'var count = 1;' and I didn't use
'var countEl = document.getElementById("count");' but you can put it in my code if you want to.
If you need help with the minus() function just post back with your new code.
CharlesEF
Now that I have a little more time let me explain. The code I posted is how I would do it but you don't have to. If you want to use your code instead then you need to fix it.

The reason your plus() starts at 2 is this 'var count = 1;'. To start from 1 you need to change it to 'var count = 0;'.

The reason your minus() never gets to 0 is this 'if (count > 1) {'. To get to 0 it should be 'if (count > 0) {'.
Louffeman
thank you so much, it's solved
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.