javascript counter with if else - Stack Overflow

admin管理员组

文章数量:1417397

I'm trying to make a counter, that can only go from 0, to a max of 10, right now I can add and delete number from the counter, but for some reason my if/else never works, no matter where I put them. I'm a real noob to javascript so if anyone could give me some advice it would be highly appreciated.

Here's my code:

 <script type="text/javascript">
var clicks = 0;
if (clicks < 0) {
    clicks = 0;
    document.getElementById("ticketAmmount").innerHTML = clicks;
}
function onClick() {
    clicks += 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
};
function offClick() {
    clicks -= 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
}

i also have tried this: but then the counter gives me NaN

<script type="text/javascript">
var clicks = 0;

function onClick() {
if (clicks < 0) {
    clicks = 0;
    document.getElementById("ticketAmmount").innerHTML = clicks;
} else {
 clicks += 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
}

};
function offClick() {
    clicks -= 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
}
</script>

I'm trying to make a counter, that can only go from 0, to a max of 10, right now I can add and delete number from the counter, but for some reason my if/else never works, no matter where I put them. I'm a real noob to javascript so if anyone could give me some advice it would be highly appreciated.

Here's my code:

 <script type="text/javascript">
var clicks = 0;
if (clicks < 0) {
    clicks = 0;
    document.getElementById("ticketAmmount").innerHTML = clicks;
}
function onClick() {
    clicks += 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
};
function offClick() {
    clicks -= 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
}

i also have tried this: but then the counter gives me NaN

<script type="text/javascript">
var clicks = 0;

function onClick() {
if (clicks < 0) {
    clicks = 0;
    document.getElementById("ticketAmmount").innerHTML = clicks;
} else {
 clicks += 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
}

};
function offClick() {
    clicks -= 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
}
</script>

• javascript

Share Improve this question Follow edited Mar 4, 2015 at 14:31 partizanos 1,1361313 silver badges2525 bronze badges asked Mar 4, 2015 at 13:32 Nick AudenaerdeNick Audenaerde 1,02522 gold badges1616 silver badges3333 bronze badges 7

• 2 Why do you check if clicks < 0 right after setting it to 0? – blex Commented Mar 4, 2015 at 13:33
• 2 where is the if/else? – Tommaso Bertoni Commented Mar 4, 2015 at 13:34
• If the if statement you're showing in the code block is any indication of where you're trying to put your if/else blocks, they'll only ever run once. You need to put them in your functions if you want them to run more than once. – RevanProdigalKnight Commented Mar 4, 2015 at 13:35
• i thought that everytime you hit the button, the script reads it from bottom to top, so if the clicks is smaller then 0, it should reset the counter back to 0 instead of going to -1 – Nick Audenaerde Commented Mar 4, 2015 at 13:35
• 2 So add the if check inside of the in/off clicks – epascarello Commented Mar 4, 2015 at 13:35

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

You were almost right, put your if within your onClick and offClick functions, and remove the first one (that doesn't seem useful):

var clicks = 0;

document.getElementById("ticketAmmount").innerHTML = clicks;

function onClick() {
    clicks += 1;
    if (clicks > 10) {
        clicks = 10;
    }
    document.getElementById("ticketAmmount").innerHTML = clicks;
};
function offClick() {
    clicks -= 1;
    if (clicks < 0) {
        clicks = 0;
    }
    document.getElementById("ticketAmmount").innerHTML = clicks;
}

It's not very plicated:

var minVal = 0, maxVal = 10, clicks = 0,
    display = document.getElementById("ticketAmmount");

function countUp(){
  clicks = Math.min( maxVal, clicks+1 );
  display.innerHTML = clicks;
}

function countDown(){
  clicks = Math.max( minVal, clicks-1 );
  display.innerHTML = clicks;
}

<button onclick="countDown();">-</button>
<span id="ticketAmmount">0</span>
<button onclick="countUp();">+</button>

if (clicks < 0) is being called only once, when the page loads, and right after you set clicks = 0, so it never meets the criteria. You need to put that logic in both the onClick and offClick or extract it out in to some method, for example:

var clicks = 0;
function resetClicks() {
    if (clicks < 0) {
      clicks = 0;
      document.getElementById("ticketAmmount").innerHTML = clicks;
    }
}

function onClick() {
    clicks += 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
    resetClicks();
};
function offClick() {
    clicks -= 1;
    document.getElementById("ticketAmmount").innerHTML = clicks;
    resetClicks();
}

本文标签： javascript counter with if elseStack Overflow