javascript - 如何设置条件来比较两个值并执行指定的功能

标签 javascript jquery html css

这段代码中的指令应该:

比较 targetNumber 和 totalScore

$(document).ready(function() {

  var totalScore = 0;
  

  var targetNumber = Math.floor(Math.random() * 120) + 12;
  $("#targetNumber").html(targetNumber);

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

  $("#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);
  });
});

$(document).ready(function() {

    var totalScore = 0;
    console.log(totalScore);
    $("#totalScore").html(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 wins = 0;
    $("#wins").html(wins)
    var losses = 0;
    $("#losses").html(losses)
    
    $("#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);
    });

    if (totalScore < targetNumber); {
		$("#totalScore").html(totalScore);
		return(totalScore);
	}
	if (totalScore > targetNumber); {
		$("#totalScore").html(totalScore);
		alert("you have exceeded the target number - Try again.");
		losses++;
		$("#losses").html(losses);
		start();
    }
	if (totalScore = targetNumber); {
		$("#totalScore").html(totalScore);
		wins++;
		$("#wins").html(wins);
        alert("Nailed it!");
    }})
body {
    background: #D2B48C;
  }
  
  ul {
    margin: 0 auto;
    margin-top:50px;
    padding: 0;
    width: 320px;
  }
  
  ul li {
    list-style: none;
    display: inline-block;
  }
<!--
    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 = "targetNumber" rows="4" cols="50"> 
                    "Hit this number without going over" 
                    </textarea>  (targetNumber)

            <textarea id = "totalScore" rows="4" cols="50"> 
                    "Your total score equals" 
                    </textarea>  (totalScore)
                    
            <textarea id = "wins" rows="4" cols="50"> 
                    "wins" 
                    </textarea>  (wins)

            <textarea id = "losses" rows="4" cols="50"> 
                    "losses" 
                    </textarea>  (losses)

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

如果 totalScore 超过 targetNumber THEN point + 1 losses 并重置游戏 如果 totalScore 小于 targetNumber THEN 继续游戏 如果 totalScore 等于 targetNumber THEN + 1 获胜并重置游戏

由于某种原因,比较和函数没有执行。

我不认为这是一个语法错误,我已经看了几十遍代码,但不明白为什么它不起作用。我在这里缺少什么?

最佳答案

比较应该像这样 totalScore === targetNumber 而不是 totalScore = targetNumber

关于javascript - 如何设置条件来比较两个值并执行指定的功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48874815/

相关文章:

javascript - 动态设置 asp.net TextBox 工具提示

php - PHP要求抛出503状态码

jquery - 有效检测兄弟元素何时重叠

javascript - 使用 JSON 调用 API

html - 在 html.erb 文件中创建方法

html - 当单元格不透明度低于 1 时,单元格边框采用单元格背景颜色,Chrome 工作正常

javascript - 从 javascript 调用 vb.net 函数

javascript - 添加到数组后更改对象的值

javascript - 以编程方式加载 Javascript 文件并在完成后加载代码

javascript - 如何在ajax返回后完全从dom中删除?