CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SomeKnow
SomeKnow

Reputation: 13

how to set a condition to compare two values and execute designated function

The instructions in this code are supposed to:

compare targetNumber to 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>

if totalScore exceeds targetNumber THEN point + 1 losses and reset game if totalScore less than targetNumber THEN continue game if totalScore equals targetNumber THEN + 1 wins and reset game

For some reason the comparison and function are not executing.

I don't think this is a syntax error and I've looked the code over dozens of times and don't see why it doesn't work. What am I missing here?

Upvotes: 0

Views: 94

Answers (2)

Matthew Lagerwey
Matthew Lagerwey

Reputation: 120

You have multiple syntax errors in this program

$(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); { // you are putting a 
//semi-colon after an if statement which creates an empty block
    $("#totalScore").html(totalScore);
    return(totalScore);
}
if (totalScore > targetNumber); { // <---- syntax error
// semi-colon after if statement
    $("#totalScore").html(totalScore);
    alert("you have exceeded the target number - Try again.");
    losses++;
    $("#losses").html(losses);
    start();
}
if (totalScore = targetNumber); { // <----you are using assignment as 
//test condition, returns true if target number is assigned to 
//total Score, probably meant === to compare two numbers
    $("#totalScore").html(totalScore);
    wins++;
    $("#wins").html(wins);
    alert("Nailed it!");
}})

Technically they are logic errors because they cause unintended behavior in the program, they are valid syntax, but not the syntax you intended.

Upvotes: 0

CodeLover
CodeLover

Reputation: 569

The comparison should be like this totalScore === targetNumber instead of totalScore = targetNumber

Upvotes: 1

Related Questions