Just started HTML, CSS, JS and im making something similar to cookie clicker to start off and learn.-CodePudding

https://WearableExaltedModes.benjaminsegger9.repl.co if you spam the one that costs 100 and gives 1 per second you will see the problem. I'm new and this is probably a really simple and obvious mistake but I would be really grateful for some help. It looks liek my 'ifs' dont work for some reason.

JS script.

score = 0;

scoretext = 0;

cookie_increaser = 1;

var dosomething = function () {
  score = score   cookie_increaser;
 document.getElementById("H1").innerText = score;
};

var dosomethingelse = function () {
  if (score > 10) {
    score = score - 10;
    document.getElementById("H1").innerText = score;
    cookie_increaser = 2
  }
}

   var dosomethingelse2 = function () {
  if (score > 20) {
    score = score - 20;
    document.getElementById("H1").innerText = score;
    cookie_increaser = 3
  }
}


var starttimer = function () {
  if (score > 100) {
    score = score - 100
  }
  setInterval(function () {
    score = score   1
    document.getElementById("H1").innerText = score;
  }, 1000)
  scoretext = scoretext   1;
  document.getElementById("h3").innerText = scoretext;
}


var starttimer2 = function () {
  if (score > 200) {
    score = score - 200
  }
  setInterval(function () {
    score = score   3
    document.getElementById("H1").innerText = score;
 }, 1000)
  scoretext = scoretext   3;
  document.getElementById("h3").innerText = scoretext;
} 

document.getElementById("btn1").addEventListener("click", dosomething)

document.getElementById("btn2").addEventListener("click", dosomethingelse)

document.getElementById("btn3").addEventListener("click", dosomethingelse2)

document.getElementById("btn4").addEventListener("click", starttimer)

document.getElementById("btn5").addEventListener("click", starttimer2)

HTML script.

  <body>
    <h1>      </h1>
    <h1> Clicks <img  width = "50"  
    src="https://www.iconpacks.net/icons/2/free-click-icon-2384-thumb.png" </h1>   
    <h1 id="H1"> 0</h1>
    <button id="btn1">Press me!</button>
    <button id="btn2">Upgrade! -- Cost: 10 points (2 per click)</button>
    <button id="btn3">Upgrade! -- Cost: 20 points (3 per click)</button>
    <button id="btn4">Upgrade! -- Cost: 100 points (1 per second)</button>
    <button id="btn5">Upgrade! -- Cost: 200 points (3 per second</button>
    <h1> Automatic clicks per second</h1>
    <h2 id="h3"> 0</h2>
    <script src="script.js"></script>
  </body>

CodePudding user response：

Likely your interval callback function closes over an old value of score. Instead, try to take the current value right off the page:

    const newScore = parseInt(document.getElementById("H1").innerText)   1
    document.getElementById("H1").innerText = newScore;

CodePudding user response：

Well, you just misplaces brackets in last 2 functions

var starttimer2 = function () {
  if (score > 200) {
    score = score - 200
      setInterval(function () {
        score = score   3
        document.getElementById("H1").innerText = score;
      }, 1000)
      scoretext = scoretext   3;
      document.getElementById("h3").innerText = scoretext;
    }
}

Also, its better to create new variable with value, that you would add to the score every second, than multiple timers. And call a function with an argument, whenever you need to increase it.

score_increment = 0;
score = 500;

setInterval(function () {
    score  = score_increment;
    document.getElementById("H1").innerText = score;
}, 1000)

function increase_increment(cost, increment) {
    if (score > cost) {
        score -= cost;
        score_increment  = increment;
        document.getElementById("h3").innerText = score_increment;
    }
} 

document.getElementById("btn5").addEventListener("click", increase_increment(200, 3))