Image Tag In HTML not clicking with jQuery-CodePudding

I'm making a clicker game but one of my images (for an upgrade) won't work when I click it. The problem is in the helper div image. I'm using HTML , css, javascript and jQuery for js

Code:

var clicks = 0;
var perclick = 1;
var persec = 0;
var costup1 = 12;
var currentup1 = 0;
var costup2 = 27;
var currentup2 = 0;
setInterval(sec, 1000)
//click and upgrade
$(document).ready(function() {
  $("#sun").click(function() {
    add()
  })
  $("#up1").click(function() {
    if (clicks >= costup1) {
      clicks = clicks - costup1
      currentup1 = currentup1   1;
      costup1 = ((currentup1   1) * 12);
      perclick = perclick   1
      update()
    } else {
      alert("You Don't Have Enough Clicks");
    }
  })
  $("#up2").click(function() {
    if (click >= currentup2) {
      clicks = clicks - costup2
      currentup2 = currentup2   1;
      costup2 = ((currentup2   1) * 27)
      persec = persec   1;
      update()
    } else {
      alert("You Don't Have Enough Clicks")
    }
  })
  //Save and load
  $(document).ready(function() {
    $("#save").click(function() {
      localStorage.setItem("clicks", clicks)
      localStorage.setItem("perclick", perclick)
      localStorage.setItem("persec", persec)
      localStorage.setItem("currentup1", currentup1)
    })
    $("#load").click(function() {
      clicks = localStorage.getItem("clicks")
      clicks = parseInt(clicks)
      perclick = localStorage.getItem("perclick")
      perclick = parseInt(perclick)
      persec = localStorage.getItem("persec")
      persec = parseInt(persec)
      currentup1 = localStorage.getItem("currentup1")
      currentup1 = parseInt(currentup1)

    })
  })
})


function add() {
  clicks = clicks   perclick;
  update()
}

function sec() {
  clicks = clicks   persec;
  update()
}

function update() {

  document.getElementById("costmag").innerHTML = ((currentup1   1) * 12)   " Clicks";
  document.getElementById("curmag").innerHTML = "You Own "   currentup1   " Magnifying Glasses( 1 Clicks Per Click)"
  document.getElementById("scoreText").innerHTML = clicks   " Clicks";
  document.getElementById("clickText").innerHTML = "You Are Gaining "   perclick   " Clicks Per Click"
  document.getElementById("secText").innerHTML = "You Are Gaining "   persec   " Clicks Per Second"

  document.getElementById("helpcur").innerHTML = "You Have "   currentup2   " Helpers( 1 Clicks Per Second)"
  document.getElementById("helpcos").innerHTML = ((currentup2   1) * 27)   " Clicks";

}

img {
  -webkit-user-drag: none;
}

button {
  box-sizing: border-box;
  background-color: #000000;
  color: cyan;
  border: none;
  font-size: 16px;
}

body {
  font-family: Architects Daughter;
}

```

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clicker Game Made With jQuery</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <p id="clickText"> You Are Gaining 1 Clicks Per Click </p>
  <p id="secText"> You Are Gaining 0 Clicks Per Second </p>
  <a href="javascript:;"><img src="Images/sun.png" id="sun"></a>
  <p id="scoreText">0 Clicks</p>


  <div >
    <p id="curmag"> You Own 0 Magnifying Glasses( 1 Clicks Per Click)</p>
    <a href="javascript:;"><img src="Images/magnify-glass.png" width="50px" height="50px" id="up1"></a>
    <p id="costmag"> 12 Clicks </p>
  </div>



  <div >
    <p id="helpcur"> You Have 0 Helpers ( 1 Clicks Per Second)</p>
    <a href="javascript:;"><img src="Images/helper.png" width="60px" height="80px" id="up2"></a>
    <p id="helpcos"> 27 Clicks </p>
  </div>

  <div >
    <button id="save">Save</button>
    <button id="load">Load</button>
  </div>

</body>

</html>

CodePudding user response：

use clicks variable in if condition of helper image click event.

var clicks = 0;
var perclick = 1;
var persec = 0;
var costup1 = 12;
var currentup1 = 0;
var costup2 = 27;
var currentup2 = 0;
setInterval(sec, 1000)
//click and upgrade
$(document).ready(function() {
  $("#sun").click(function() {
    add()
  })
  $("#up1").click(function() {
    if (clicks >= costup1) {
      clicks = clicks - costup1
      currentup1 = currentup1   1;
      costup1 = ((currentup1   1) * 12);
      perclick = perclick   1
      update()
    } else {
      alert("You Don't Have Enough Clicks");
    }
  })
  $("#up2").click(function() {
    if (clicks >= currentup2) {
      clicks = clicks - costup2
      currentup2 = currentup2   1;
      costup2 = ((currentup2   1) * 27)
      persec = persec   1;
      update()
    } else {
      alert("You Don't Have Enough Clicks")
    }
  })
  //Save and load
  $(document).ready(function() {
    $("#save").click(function() {
      localStorage.setItem("clicks", clicks)
      localStorage.setItem("perclick", perclick)
      localStorage.setItem("persec", persec)
      localStorage.setItem("currentup1", currentup1)
    })
    $("#load").click(function() {
      clicks = localStorage.getItem("clicks")
      clicks = parseInt(clicks)
      perclick = localStorage.getItem("perclick")
      perclick = parseInt(perclick)
      persec = localStorage.getItem("persec")
      persec = parseInt(persec)
      currentup1 = localStorage.getItem("currentup1")
      currentup1 = parseInt(currentup1)

    })
  })
})


function add() {
  clicks = clicks   perclick;
  update()
}

function sec() {
  clicks = clicks   persec;
  update()
}

function update() {

  document.getElementById("costmag").innerHTML = ((currentup1   1) * 12)   " Clicks";
  document.getElementById("curmag").innerHTML = "You Own "   currentup1   " Magnifying Glasses( 1 Clicks Per Click)"
  document.getElementById("scoreText").innerHTML = clicks   " Clicks";
  document.getElementById("clickText").innerHTML = "You Are Gaining "   perclick   " Clicks Per Click"
  document.getElementById("secText").innerHTML = "You Are Gaining "   persec   " Clicks Per Second"

  document.getElementById("helpcur").innerHTML = "You Have "   currentup2   " Helpers( 1 Clicks Per Second)"
  document.getElementById("helpcos").innerHTML = ((currentup2   1) * 27)   " Clicks";

}

img {
  -webkit-user-drag: none;
}

button {
  box-sizing: border-box;
  background-color: #000000;
  color: cyan;
  border: none;
  font-size: 16px;
}

body {
  font-family: Architects Daughter;
}

```

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clicker Game Made With jQuery</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <p id="clickText"> You Are Gaining 1 Clicks Per Click </p>
  <p id="secText"> You Are Gaining 0 Clicks Per Second </p>
  <a href="javascript:;"><img src="Images/sun.png" id="sun"></a>
  <p id="scoreText">0 Clicks</p>


  <div >
    <p id="curmag"> You Own 0 Magnifying Glasses( 1 Clicks Per Click)</p>
    <a href="javascript:;"><img src="Images/magnify-glass.png" width="50px" height="50px" id="up1"></a>
    <p id="costmag"> 12 Clicks </p>
  </div>



  <div >
    <p id="helpcur"> You Have 0 Helpers ( 1 Clicks Per Second)</p>
    <a href="javascript:;"><img src="Images/helper.png" width="60px" height="80px" id="up2"></a>
    <p id="helpcos"> 27 Clicks </p>
  </div>

  <div >
    <button id="save">Save</button>
    <button id="load">Load</button>
  </div>

</body>

</html>