I am trying to build a very simple points counter on a website. The numbers and button press aren't showing up in the main HTML. I am somewhat familiar with javascript, but not how to implement it onto a website. Help?
I've tried putting the javascript in a tag in the header, but it still doesn't show up.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="/public_html/script.js"></script>
</head>
<body>
<div id="main-container">
<div class="health-box" id="opponent-health">
<img src="https://www.trzcacak.rs/myfile/full/208-2086167_runic-letter-othalan-rune-odal.png">
<div class="health-counter" id="opponent-health-counter">
</div>
<div class="health-adjust health-minus" id="opponent-health-minus">
▼
</div>
<div class="health-adjust health-plus" id="opponent-health-plus">
▲
</div>
</div>
<div class="health-box" id="your-health">
<p> LP </p>
<div class="health-counter" id="your-health-counter">
</div>
<div class="health-adjust health-minus" id="your-health-minus">
▼
</div>
<div class="health-adjust health-plus" id="your-health-plus">
▲
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
//Variable set-up
var opponentHealth = 0;
var yourHealth = 10;
$("#opponent-health-counter").html(opponentHealth);
$("#your-health-counter").html(yourHealth);
//Health adjust code
$(".health-adjust").click(function() {
if (this.id == "opponent-health-minus" && opponentHealth > 0) {
opponentHealth -= 1;
}
else{
opponentHealth -= 0;
};
if (this.id == "your-health-minus") {
yourHealth -= 1;
};
if (this.id == "opponent-health-plus" && opponentHealth < yourHealth) {
opponentHealth += 1;
}
else{
opponentHealth += 0;
};
if (this.id == "your-health-plus") {
yourHealth += 1;
};
$("#opponent-health-counter").html(opponentHealth);
$("#your-health-counter").html(yourHealth);
});
});
Here is a link to a Pen where the programming works as expected. https://codepen.io/iph33r/full/LYPpOJm
Aucun commentaire:
Enregistrer un commentaire