CODEWITHSUNDEEP
javascriptif-statement
Wes L
Wes L

Reputation: 1

JavaScript if statement comparison not working

The if statement is supposed to compare buttonId value to randButtonId value and even when they do match it still says that it is wrong. The buttons go left to right button1, button2, button3, button4. 

setBoard();
var randButtonId;
function setBoard(){
  var r = randomNumber(0 , 235);
  var g = randomNumber(0 , 235);
  var b = randomNumber(0 , 235);
  var color = rgb(r, g, b);
  var r2 = r + 20;
  var g2 = g + 20;
  var b2 = b + 20;
  var diffColor = rgb(r2 , g2 , b2);
  var randButtonId = "button" + randomNumber(1,4);
  setProperty("button1", "background-color", color);
  setProperty("button3", "background-color", color);
  setProperty("button2", "background-color", color);
  setProperty("button4", "background-color", color);
  setProperty(randButtonId, "background-color", diffColor);
  console.log("The correct one is: " + randButtonId);
}

function checkCorrect( buttonId ){
  console.log("Checking: " + buttonId);
  if( buttonId == randButtonId ) {
        console.log("You got it right!");
  } else {
        console.log("WRONG");
  }
  setBoard();
}
onEvent("button1", "click", function() {
  checkCorrect("button1");
});
onEvent("button2", "click", function() {
  checkCorrect("button2");
});
onEvent("button3", "click", function() {
  checkCorrect("button3");
});
onEvent("button4", "click", function() {
  checkCorrect("button4");
});

Upvotes: 0

Views: 261

Answers (2)

Gnanasekar S
Gnanasekar S

Reputation: 1890

You did not declared randomNumber function

Put this script inside head tag

<script>
function randomNumber(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

Upvotes: 0

ichigolas
ichigolas

Reputation: 7735

This probably has to do with lexical scoping. Consider this part of your code:

var randButtonId = 'original value';

function setBoard() {
  // ...
  var randButtonId = 'something'
  console.log({
    randButtonId: randButtonId
  })
  // ...
}

function checkCorrect(buttonId) {
  console.log({
    randButtonId: randButtonId
  })
}

checkCorrect() // { "randButtonId": "original value" }
setBoard() // { "randButtonId": "something" }
checkCorrect() // { "randButtonId": "original value" }

You are expecing your functions to use the global variable randButtonId declared in the first line. But ´setBoard´ function uses var to tell the interpreter that the variable randButtonId is scope local.

TL;DR: If you want to use the global var randButtonId inside setBoard, skip the var declaration.

However, using global variables is a bad practice as it leads to this kind of problems. A much safer approach it's to encapsulate all your logic within a namespace. For example:

var ButtonChecker = {
  randButtonId: 'original value',
  
  setBoard: function() {
    // ...
    this.randButtonId = 'something'
    console.log({
      randButtonId: this.randButtonId
    })
    // ...
  },

  checkCorrect: function(buttonId) {
    console.log({
      randButtonId: this.randButtonId
    });
  }
};

ButtonChecker.checkCorrect(); // { "randButtonId": "original value" }
ButtonChecker.setBoard(); // { "randButtonId": "something" }
ButtonChecker.checkCorrect(); // { "randButtonId": "something" }

Upvotes: 1

Related Questions