不使用jQuery单击的HTML中的图像标记

Question

我正在制作一个点击游戏，但是当我点击它时，我的一个图像(用于升级)将无法工作。问题在助手div映像中。我为js使用了HTML、css、javascript和jQuery

代码：

​

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

```javascript

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

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

<button id="save">Save</button>

<button id="load">Load</button>

​

Answer 1

在helper图像单击事件的if条件下使用clicks变量。

​

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

```javascript

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

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

<button id="save">Save</button>

<button id="load">Load</button>

​