mercredi 1 juillet 2015

Do something else on certain condition if statement failing javascript

I am creating a game that requires the player to click different divs when the light up (the holes) and am trying to change the score if the divs are red, and not if they are black. Pretty simple, right? Well I can not find out what the heck is wrong with this code here:

//All the useful code
function revert(holeNum) {
  if (holeNum === 1) {
    if (document.getElementById("hole1").style.backgroundColor === "#C90000") {
      score += 1;
      document.getElementById("scoreUpdate").innerHTML = score;
      alert("success");
    }
    document.getElementById("hole1").style.backgroundColor = "#000000";
  } else if (holeNum === 2) {
    if (document.getElementById("hole2").style.backgroundColor === "#C90000") {
      score += 1;
      document.getElementById("scoreUpdate").innerHTML = score;
    }
    document.getElementById("hole2").style.backgroundColor = "#000000";
  } else if (holeNum === 3) {
    if (document.getElementById("hole3").style.backgroundColor === "#C90000") {
      score += 1;
      document.getElementById("scoreUpdate").innerHTML = score;
    }
    document.getElementById("hole3").style.backgroundColor = "#000000";
  } else if (holeNum === 4) {
    if (document.getElementById("hole4").style.backgroundColor === "#C90000") {
      score += 1;
      document.getElementById("scoreUpdate").innerHTML = score;
    }
    document.getElementById("hole4").style.backgroundColor = "#000000";
  } else if (holeNum === 5) {
    if (document.getElementById("hole5").style.backgroundColor === "#C90000") {
      score += 1;
      document.getElementById("scoreUpdate").innerHTML = score;
    }
    document.getElementById("hole5").style.backgroundColor = "#000000";
  } else if (holeNum === 6) {
    console.log("hole 6 pressed");
    if (document.getElementById("hole6").style.backgroundColor === "#C90000") {
      score += 1;
      document.getElementById("scoreUpdate").innerHTML = score;
      console.log("Score Updated from hole 6");
    } else {
      document.getElementById("hole6").style.backgroundColor = "#000000";
      console.log("hole six reverted to black");
    }
  }
}

The idea is one hole changes color periodically. When the divs are clicked, right from the html tag they call the revert function with the holeNum being the number of the hole. The revert function is suppose to change the hole back to black and update the score if it was red when clicked. Each hole does call the right part of the if statement directly under the function. Hole one does call the hole one part, same for 2-6. In their respective part of the first if statements, the nested if statements don't run. Under hole six, when I click the hole, regardless of what color the hole is, the only console.log statement that runs is "hole 6 pressed." Can someone help me please? Thanks.

Aucun commentaire:

Enregistrer un commentaire