javascript doesn't work


xnatex

macrumors member
Nov 19, 2012
82
60
Right above where you define the "restart()" function, you have an "else" that does not have an "if" to it. Because of this syntax error, none of your javascript is running. You should check out the console in your web browser (CMD+Option+i on a Mac in Chrome) to see the errors that are happening.

Also, if I might offer some advice. Some of your logic can be simplified by using "return" more.

For example, the alreadyOver function could simplified from

Code:
function alreadyOver()
{
  if(count==3)
  {
    return true;
  }
  else
  {
    return false;
  }
}
to

Code:
function alreadyOver() {
  return count === 3;
}
This will return true if count is the number 3 and false if it isn't.

Likewise, the rightNumber function could be changed from:

Code:
function rightNumber(circleNumber) {
  var result=false;
  for(var index=0; index<3; index++) {
    if(randomNumbers[index]==circleNumber) {
      result=true;
      break;
    }
  }
  return result;
}
to

Code:
function rightNumber(circleNumber) {
  for(var index=0; index < randomNumbers.length; index++) {
    if(randomNumbers[index] === circleNumber) {
      return true;
    }
  }
  return false;
}
If it finds a number that matches the one that was input, it will return true and exit the function, short-circuiting the rest of the function and never hitting the line that returns false. If it does not find one after looping, the code will get to the return false line, and will return false (obviously). Also, it would be good to use randomNumbers.length instead of hardcoding the number 3 here. This will allow you to add more to the randomNumbers array if you wanted, and you wouldn't have to change this method.

I'm not sure if this is a school assignment, with requirements that say you can't do this, but it could be simplified even further by using the "includes" method on an Array, which returns true if the value is in the array and false if it is not.

Code:
function rightNumber(circleNumber) {
  return randomNumbers.includes(circleNumber);
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Going back to the alreadyOver method, I believe the value 3 is used because that's how many random numbers there are. If so, it would be best to change that method to not use a 3 as well, for the same reason as before:

Code:
function alreadyOver() {
  return count === randomNumbers.length;
}
Another thing I'd like to mention is that I have been using the "===" operator, where you've been using the "==" operator. There's an important difference, in that "==" will coerce the values to be the same datatype and then check for equality, where "===" will not coerce.

"1" == 1
This returns true because it will turn the number 1 into a string 1 and then compare if "1" === "1".

"1" === 1
This returns false because a string containing the number 1 is not the same as the number 1.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness

Sometimes, the loose comparison is enough, but other times you want to ensure that they are actually the same.

Likewise, there's the != and the !== operators, which let you know if two values are NOT the same.

Also, the includes method on an Array does care about datatype, so [1,2,3].includes("1") will return false.

Hope this helps!
 
Last edited:

IHelpId10t5

macrumors 6502
Nov 28, 2014
477
314
Yoda: Luke! You must complete the training.
...
Luke: But I've learned so much since then. Master Yoda, I promise to return and finish what I've begun. You have my word.
 

mbpowner

macrumors regular
Original poster
Aug 19, 2016
174
14
Right above where you define the "restart()" function, you have an "else" that does not have an "if" to it. Because of this syntax error, none of your javascript is running. You should check out the console in your web browser (CMD+Option+i on a Mac in Chrome) to see the errors that are happening.

Also, if I might offer some advice. Some of your logic can be simplified by using "return" more.

For example, the alreadyOver function could simplified from

Code:
function alreadyOver()
{
  if(count==3)
  {
    return true;
  }
  else
  {
    return false;
  }
}
to

Code:
function alreadyOver() {
  return count === 3;
}
This will return true if count is the number 3 and false if it isn't.

Likewise, the rightNumber function could be changed from:

Code:
function rightNumber(circleNumber) {
  var result=false;
  for(var index=0; index<3; index++) {
    if(randomNumbers[index]==circleNumber) {
      result=true;
      break;
    }
  }
  return result;
}
to

Code:
function rightNumber(circleNumber) {
  for(var index=0; index < randomNumbers.length; index++) {
    if(randomNumbers[index] === circleNumber) {
      return true;
    }
  }
  return false;
}
If it finds a number that matches the one that was input, it will return true and exit the function, short-circuiting the rest of the function and never hitting the line that returns false. If it does not find one after looping, the code will get to the return false line, and will return false (obviously). Also, it would be good to use randomNumbers.length instead of hardcoding the number 3 here. This will allow you to add more to the randomNumbers array if you wanted, and you wouldn't have to change this method.

I'm not sure if this is a school assignment, with requirements that say you can't do this, but it could be simplified even further by using the "includes" method on an Array, which returns true if the value is in the array and false if it is not.

Code:
function rightNumber(circleNumber) {
  return randomNumbers.includes(circleNumber);
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Going back to the alreadyOver method, I believe the value 3 is used because that's how many random numbers there are. If so, it would be best to change that method to not use a 3 as well, for the same reason as before:

Code:
function alreadyOver() {
  return count === randomNumbers.length;
}
Another thing I'd like to mention is that I have been using the "===" operator, where you've been using the "==" operator. There's an important difference, in that "==" will coerce the values to be the same datatype and then check for equality, where "===" will not coerce.

"1" == 1
This returns true because it will turn the number 1 into a string 1 and then compare if "1" === "1".

"1" === 1
This returns false because a string containing the number 1 is not the same as the number 1.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness

Sometimes, the loose comparison is enough, but other times you want to ensure that they are actually the same.

Likewise, there's the != and the !== operators, which let you know if two values are NOT the same.

Also, the includes method on an Array does care about datatype, so [1,2,3].includes("1") will return false.

Hope this helps!
Thank you!

And btw no, this isn't a school assignment!