Question

我试图在每次点击时将变量 ruby，diamond，emerald，和 bloodstone 的值传递给变量 totalScore 。我已为每个按钮添加了事件侦听器，但单击按钮时没有任何反应。我应该使用＆＃34;返回＆＃34;的某些变体。完成这个？

我已经加入了javascript，html和css。

＆＃13;

$(document).ready(function() {

  var totalScore = 0;
  console.log(totalScore);

  var ruby = Math.floor(Math.random() * 10) + 1;
  console.log(ruby);
  var diamond = Math.floor(Math.random() * 10) + 1;
  console.log(diamond);
  var emerald = Math.floor(Math.random() * 10) + 1;
  console.log(emerald);
  var bloodstone = Math.floor(Math.random() * 10) + 1;
  console.log(bloodstone);

  var targetNumber = Math.floor(Math.random() * 100) + 1;

  $("#totalScore").html(totalScore + ruby);


  $("#ruby").click(function() {
    totalScore = totalScore + ruby;
  })
  return ("totalScore");

  $("#diamond").click(function() {
    totalScore = totalScore + diamond;
  })
  console.log("totalScore");

  $("#emerald").click(function() {
    totalScore = totalScore + emerald;
  })
  console.log("totalScore");

  $("#bloodstone").click(function() {
    totalScore = totalScore + bloodstone;
  })
  console.log("totalScore");
})

＆＃13;

body {
  background: #D2B48C;
}

ul {
  margin: 0 auto;
  margin-top: 50px;
  padding: 0;
  width: 320px;
}

ul li {
  list-style: none;
  display: inline-block;
}

＆＃13;

<!--
    javascript

    Crystals: Ruby, Diamond, Emerald, Blodstone
        value between 1-10
        each click adds crystal value to totalScore

    targetNumber
        randomly generated

    totalScore
        sum of crystal clicks
    
    WinsLosses
        If totalScore = targetNumber + 1 Win and Reset
        If totalScore > targetNumber + 1 Loss and Reset
    -->


<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Crystal Game</title>
</head>

<body>
  <textarea id="totalScore" rows="4" cols="50"> 
                    "Your total score equals" 
                    </textarea> (totalScore)
  <button type="button" id="ruby">Ruby</button>

  <button type="button" id="diamond">Diamond</button>

  <button type="button" id="emerald">Emerald</button>

  <button type="button" id="bloodstone">Bloodstone</button>


  <script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="assets/javaScript/crystal.js"></script>
</body>

</html>

＆＃13;

Answer 1

您必须在每次$("#totalScore").html(totalScore + ruby);行动中致电click 以下是更正后的代码：

<!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">
  <title>Crystal Game</title>
  
  <style>
	  body {
		  background: #D2B48C;
		}

		ul {
		  margin: 0 auto;
		  margin-top: 50px;
		  padding: 0;
		  width: 320px;
		}

		ul li {
		  list-style: none;
		  display: inline-block;
		}
  </style>
</head>

<body>
	<textarea id="totalScore" rows="4" cols="50"> 
					"Your total score equals" 
					</textarea> (totalScore)
	<button type="button" id="ruby">Ruby</button>

	<button type="button" id="diamond">Diamond</button>

	<button type="button" id="emerald">Emerald</button>

	<button type="button" id="bloodstone">Bloodstone</button>


	<script src="http://code.jquery.com/jquery-3.3.1.js" 
		integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 
		crossorigin="anonymous"></script>
	<script>
		$(document).ready(function() {

		var totalScore = 0;
		console.log(totalScore);

		var ruby = Math.floor(Math.random() * 10) + 1;
		console.log(ruby);
		var diamond = Math.floor(Math.random() * 10) + 1;
		console.log(diamond);
		var emerald = Math.floor(Math.random() * 10) + 1;
		console.log(emerald);
		var bloodstone = Math.floor(Math.random() * 10) + 1;
		console.log(bloodstone);

		var targetNumber = Math.floor(Math.random() * 100) + 1;

		$("#totalScore").html(totalScore + ruby);
		
		$("#ruby").click(function() {
		totalScore = totalScore + ruby;
		console.log("totalScore");
		$("#totalScore").html(totalScore + ruby);
		});

		$("#diamond").click(function() {
		totalScore = totalScore + diamond;
		console.log("totalScore");
		$("#totalScore").html(totalScore + diamond);
		});

		$("#emerald").click(function() {
		totalScore = totalScore + emerald;
		console.log("totalScore");
		$("#totalScore").html(totalScore + emerald);
		});

		$("#bloodstone").click(function() {
		totalScore = totalScore + bloodstone;
		console.log("totalScore");
		$("#totalScore").html(totalScore + bloodstone);
		});
		});
	</script>
</body>
</html>

如何在点击时将值传递给var

1 个答案: