javascript counter with if else

Question

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>

Why do you check if clicks < 0 right after setting it to 0? — blex
– blex, Commented Mar 4, 2015 at 13:33
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
– 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
– Nick Audenaerde, Commented Mar 4, 2015 at 13:35

Rubik · Accepted Answer · 2015-03-04 13:37:00Z

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;
}

answered Mar 4, 2015 at 13:37

Rubik

1,4711 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Audenaerde Over a year ago

Yes it works thanks! It's actually really logic when you think about it!

blex · Accepted Answer · 2015-03-04 13:40:52Z

2

It's not very complicated:

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>

answered Mar 4, 2015 at 13:40

blex

25.7k6 gold badges48 silver badges78 bronze badges

Comments

Tom · Accepted Answer · 2015-03-04 13:36:52Z

1

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();
}

answered Mar 4, 2015 at 13:36

Tom

7,7401 gold badge26 silver badges49 bronze badges

Collectives™ on Stack Overflow

javascript counter with if else

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related