Is there a way to activate a function when a variable gets to a certain number?

Question

So the idea is to make the perfectcookie.png change to brokencookie.png when the user gets to a 150 "cookies", when the cookiecount gets to 150. I'm new to javascript so there may be multiple mistakes.

var cookiecount = 0;
function add() {
  cookiecount += value;
  document.getElementById('text').innerHTML = cookiecount;
}
document.title = cookiecount + " Cookies"
function upgrade() {
  if (cookiecount >= 50) {
    value += 1;
    cookiecount -= 50;
  }
  else {
    alert("Not enough cookies!");
  }
}
function victory () {
  if (cookiecount >= 150) {
    document.getElementById(cookie).innerHTML = "brokencookie.png";
  }
}

<center>
  <a href="#" onclick=add() onclick=victory()><img src="perfectcookie.png" id="cookie"></a>
  <br><br>
  <p class="maintext">You Got:</p>
  <span id="text" style="font-family: Elephant, serif; padding: 0px;"></span>
  <br><br>
  <div class="upgrade">
    <a href="#" onclick=upgrade()><img src="pointer.png" height="100px" padding="50S"></a>
  </div>
</center>

Yes there is a way. You will need 2 different functions that are independant of each other. One of the functions will handle the cookie count logic and what else revolves around it. The other function will handle your image swapping. Then in the function that handles the cookie logic, you make an if condition checking for the count and fire the image change function if the condition is met. `if(cookiecount >= 15) { otherFunction(); }` — Martin, Sep 14 '18 at 11:11
you can use JavaScript proxies for this, specifically the getter trap. Which will watch for values as it changes and when they change trigger your action https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy — Adeel Imran, Sep 14 '18 at 11:18

John Smith · Answer 1 · 2018-09-14T11:29:27.833

Simple solution:

function add() {
    cookiecount += value

     if(cookiecount === 150)
       document.getElementById("cookie").src = "brokencookie.png";

    document.getElementById('text').innerHTML = cookiecount;
}

What happens is that whenever you increase a cookie counter, you will check whether it's 150. If it is, you replace the src attribute of your image.

Don't forget that all HTML attributes should be surrounded with quotes (not onClick=add() but onClick="add()").

Optimal solution would be to create a separate function that would decide what should happen when cookiecount reaches certain limit. It is a good practice, because it makes your code more flexible and extensible. Something like this:

function cookieActions(count) {
    if(count >= 150 && count < 300)
       document.getElementById("cookie").src = "brokencookie.png";

    else if(count >= 300)
       document.getElementById("cookie").src = "flyingcookie.png";

    // As many else if block as you need!
}

// It's better to pass value in function as an argument, because
// it simplifies things a lot when you want value to change on different events.

function add(value) {
    cookiecount += value;

    // Call the control function here.
    cookieActions(cookiecount);

    document.getElementById('text').innerHTML = cookiecount;
}

user5493187 · Answer 2 · 2018-09-14T12:49:09.993

There are a few ways. The most simple of them is to simply call the victory() function inside the add() function:

function add() {
    cookiecount += value
    document.getElementById('text').innerHTML = cookiecount;
    if(cookiecount >= 150){
        victory();
    }
}

If you want something a little more complex, you could have a look at this question and adapt it to fit your needs.

Using either of these solutions, it would also be unnecessary to do any checks inside the victory() function:

function victory() {
    document.getElementById(cookie).innerHTML = "brokencookie.png";
}

As a side note, your victory() function won't work. Change it to

function victory() {
    document.getElementById("cookie").setAttribute("src", "brokencookie.png");
}

score 0 · Answer 3 · answered Sep 14 '18 at 11:44

I don't know if this is your full code for this functionality, but if it is:

you do not have cookiecount or value variables declared and asigned values. When I tried your code, I had to assign some values to get it to work.
if you want to call multiple functions on one event you should seperate them with a semicolon like this:

onclick="add();victory()"
In your function victory() when you are getting an element by id, you forgot to add quotes. It should be like this:

document.getElementById('cookie').innerHTML = "brokencookie.png";

I hope I understood what you where trying to do here and was able to help somehow.

Is there a way to activate a function when a variable gets to a certain number?

3 Answers3