脑子正在融化。我不知道为什么我的数字没有显示在HTML上。首先，这是我不知道的事情，我在索引文件中切换了Bootstrap和jQuery链接的顺序，这有助于解决一个完全的谜团，并且解决了所有许多语法错误，现在我没有得到控制台中的任何错误，但我也未在记录console.logs。当我将鼠标悬停在addValues函数和click函数上时，它们都说“ void”，但是我找不到我的错误，也无法弄清为什么它没有记录到控制台。我是一名学习型开发人员。...
//global variables
var crystal = {
purple:
{
name: "purple",
value: 0
},
green: {
name: "green",
value: 0
},
orange: {
name: "orange",
value: 0
},
star: {
name: "star",
value: 0
},
};
//Scores
var yourScore = 0;
var targetScore = 0;
//Wins and Losses
var winCount = 0;
var lossCount = 0;
//functions
//math function so that we can get some random numbers
var getRandom = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
// Starts the game
var startGame = function() {
//Resets the current score
yourScore = 0;
//sets the new Target score (between 19 and 120)
targetScore = getRandom(19, 120);
//Sets the rand values for each crystal (between 1 and 12)
crystal.green.value = getRandom(1, 12);
crystal.orange.value = getRandom(1, 12);
crystal.purple.value = getRandom(1, 12);
crystal.star.value = getRandom(1, 12);
// jQuery to add input to the HTML
$("#your-Score").text(yourScore);
$("#target-Score").text(targetScore);
//Is any of this working?
console.log("Target Score: " + targetScore);
console.log("Green: " + crystal.green.value + " | Orange: " + crystal.orange.value + " | Purple: " + crystal.purple.value + " | Star: " + crystal.star.value);
console.log("---------------------------");
};
//Check if we won or lost and reset the game
var checkWin = function() {
//do your if you lose
if (yourScore > targetScore) {
alert("Sorry, you lose.");
console.log("You lost.");
//add to loss counter
lossCount++;
//change the html
$("#loss-Count").text(lossCount);
//Restart the game
startGame();
}
else if (yourScore === targetScore) {
alert("Congratulations! You won!");
console.log("You win.");
//add to win counter
winCount++;
// Change the win count in HTML through jQuery
$("#win-Count").text(winCount);
//Restart the gaem
startGame();
}
};
//when you click on the crystals there should be a value added...
var addValues = function(crystal) {
//Change Your Score
yourScore =+ crystal.value;
//Add jQuery to connect to html
$("#your-Score").text(yourScore);
//calling the checkWin function
checkWin();
//is it working? no. it is not. :(
console.log("Your Score: " + yourScore);
};
//main process
//starts the game the first time.
startGame();
$("#purple").click(function() {
addValues(crystal.purple);
});
$("#green").click(function() {
addValues(crystal.green);
});
$("#orange").click(function() {
addValues(crystal.orange);
});
$("#star").click(function() {
addValues(crystal.star);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--JQuery style sheet-->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<!--JS file link-->
<script type="text/javascript" src="assets\javascript\game.js"></script>
<!--Bootstrap stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<title>Crystal Game</title>
</head>
<body>
<div class="container">
<!--Game heading using bootstrap jumbotron-->
<div class="jumbotron" style="background-color:rgb(166, 83, 245); color: white">
<div class="container">
<h1 class="text-center">
<strong>Crystal Collector Game</strong>
</h1>
</div>
<!--Game Instructions-->
<div class="row">
<!--Instructions container-->
<div class="col-md-12">
<div class="card-mb-4">
<div class="card-header" style="background-color: rgb(255, 189, 47)">
<h3 class="card-title text-center">Instructions</h3>
</div>
<div class="card-body">
<p class="text-center"><small>You will be given a random number at the start of the game.<br>
There are four crystals below. Click on a crystal to add points to your total score. Win the game by clicking the crystals to match the random number. Lose the game when you click a crystal and the number goes over the random number. The value of each crystal is hidden from you until you click on it.<br>
For each new game, the random number changes and the value of each crystal changes.<br>
Good luck!</small></p>
</div>
</div>
</div>
<!--Scores and Crystals-->
<div class="row" style="width: 100%">
<div class="col-md-3">
<div class="card-mb-4">
<div class="card-header" style="background-color: rgb(255, 189, 47)">
<h3 class="card-title text-center">Target Score</h3>
</div>
<div class="card-body">
<h3 class="text-center" id="target-Score">0</h3>
</div>
</div>
</div>
<!--Your score-->
<div class="col-md-3">
<div class="card-mb-4">
<div class="card-header" style="background-color: rgb(255, 189, 47)">
<h3 class="card-title text-center">Your Score</h3>
</div>
<div class="card-body">
<h3 class="text-center" id="your-Score">0</h3>
</div>
</div>
</div>
<!--Wins Count-->
<div class="col-md-3">
<div class="card-mb-4">
<div class="card-header" style="background-color: rgb(255, 189, 47)">
<h3 class="card-title text-center">Win Count</h3>
</div>
<div class="card-body">
<h3 class="text-center" id="win-Count">0</h3>
</div>
</div>
</div>
<!--Loss Count-->
<div class="col-md-3">
<div class="card-mb-4">
<div class="card-header" style="background-color: rgb(255, 189, 47)">
<h3 class="card-title text-center">Loss Count</h3>
</div>
<div class="card-body">
<h3 class="text-center" id="loss-Count">0</h3>
</div>
</div>
</div>
</div>
<!--Crystals-->
<div class="card-mb-6">
<div class="card-header" style="background-color: rgb(255, 189, 47)">
<h3 class="card-title text-center">Crytal Count</h3>
</div>
<div class="card-body">
<div class="row" style="width: 100%">
<img id="purple" class="col-md-3" style="height: 25%" src="https://vignette.wikia.nocookie.net/dynastywarriors/images/4/4a/Amethyst_5_%28DWU%29.png">
<img id="orange" class="col-md-3" style="height: 25%" src="https://image.flaticon.com/icons/png/128/460/460852.png">
<img id="green" class="col-md-3" style="height: 25%" src="https://mbch.guide/wp-content/uploads/crystal_free.png">
<img id="star" class="col-md-3" style="height: 25%" src="https://raw.githubusercontent.com/apavlinovic/pokemon-go-imagery/42a8d6aaad6d95ef0753fe80b4ddd168dd05908e/images/starpiece.png" >
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
click事件不起作用，因为JavaScript在呈现元素之前运行。您可以通过将事件放入文档就绪函数中来解决此问题：
$(document).ready(function () {
$("#purple").click(function () {
addValues(crystal.purple);
});
$("#green").click(function () {
addValues(crystal.green);
});
$("#orange").click(function () {
addValues(crystal.orange);
});
$("#star").click(function () {
addValues(crystal.star);
});
startGame();
});