Javascript if-else interpretation

Question

This little program is supposed to have the browser guess at what the user inputs. It's "how many fingers". So i want it to force the user to use a number 5 or less.

If the input is larger than the range of options available to the program, the program will error out and break the browser. I've tried rearranging the nesting of the scripts in various ways to get a feel for how JS "thinks". Unfortunately, I still don't have a grasp of how Javascript is interpreting the flow of the code.

I use SQL at work and am familiar with the logic of PEMDAS in math. I think this is a similar situation where i'm missing something about the logical implications of the syntax. It seems to me like this is a very straightforward program.

I don't understand why the program doesn't execute the alert when my input meets the criteria for executing the IF clause. It works fine on the Else clause.

document.getElementById("guess").onclick = function() {

  var a = document.getElementById("myNumber").value;
  var b = 6;
  var x = Math.random();
  x = x * b;
  x = Math.floor(x);

  if (a > b) {

    alert("you don't have that many fingers");

  } else {

    var gotit = false;
    var guesses = 1;

    while (gotit == false) {

      if (a == x) {
        gotit = true;
        alert("Success! the answer is" + x + " or " + a + " it took me " + guesses + " guesses!");
      } else {
        guesses++;
        var x = Math.random();
        x = x * b;
        x = Math.floor(x);
      }
    }

  }

}

<p>How many fingers are you holding up?</p>
<input id="myNumber" />
<button id="guess">Guess!</button>

All help is greatly appreciated.

Yes, you are correct .. I don't have 7 or more fingers on one hand. — JK.
– JK., Commented Jun 26, 2015 at 0:18

Barmar · Accepted Answer · 2015-06-26 00:29:41Z

2

You need to change the test to if (a >= b). The code guesses numbers from 0 to 5, so if the user enters 6 it will never match. But a > b only succeeds when they enter 7 or higher -- 6 is not greater than b.

document.getElementById("guess").onclick = function() {

  var a = document.getElementById("myNumber").value;
  var b = 6;
  var x = Math.random();
  x = x * b;
  x = Math.floor(x);

  if (a >= b) {

    alert("you don't have that many fingers");

  } else {

    var gotit = false;
    var guesses = 1;

    while (gotit == false) {

      if (a == x) {
        gotit = true;
        alert("Success! the answer is " + x + " or " + a + " it took me " + guesses + " guesses!");
      } else {
        guesses++;
        var x = Math.random();
        x = x * b;
        x = Math.floor(x);
      }
    }

  }

}

<p>How many fingers are you holding up?</p>
<input id="myNumber" />
<button id="guess">Guess!</button>

answered Jun 26, 2015 at 0:29

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RedBeardPro Over a year ago

Thank you Barmar, i sincerely appreciate your help here!

Jan · Accepted Answer · 2015-06-26 01:22:41Z

0

First off, you're repeating your random generation, so I'd break that out to a function. Second, your logic is wrong (has a chance of the guess being 0 fingers as well as a very small chance of it being 6 fingers).

What Math.random actually does is returns a value between 0 and 1, so I think you can see the logic error there (0 to 1)*6 = possibly 0 or 6.

So if you start off with a function for the calculation

  function getRandomFinger(amountOfFingers) {
    var x = Math.random();
    x = (x * (amountOfFingers-1))+1; // ((0 to 1)*4)+1 because always at least one finger but possibly 4 more
    return Math.round(x);
  }

and you can call that when needed. And then actually defining the amount of fingers makes more sense right? More than some seemingly random number.

  var b = 5; // 5 fingers on the hand

Add those few changes and your code should work.

edited Jun 26, 2015 at 1:22

answered Jun 26, 2015 at 0:49

Jan

5,8573 gold badges29 silver badges44 bronze badges

4 Comments

RedBeardPro Over a year ago

I understand the recommendation of setting up a function, but i don't understand what you're getting at with the math. I'll have to look this over and mess with it some to get a grip on it. and Thank you for your help!

Jan Over a year ago

Well, (0 to 1)*6 could give a value between 0 and 6, right? Which means you could end up with 0 or 6, both invalid values for your purpose. ((0 to 1)*4)+1 would always give a value between 1 (the +1) and 5 (the ((0 to 1)*4) part), which is what you're after.

RedBeardPro Over a year ago

10-4 I gotcha now. It could generate 0, which is ok, because i could have 0 fingers held up, but it wont generate 1. That does make me want to tweak it so that you couldn't choose less than 0. Again, thanks for your input! "The Math.random() function returns a floating-point, pseudo-random number in the range [0, 1) that is, from 0 (inclusive) up to but not including 1 (exclusive)" developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Jan Over a year ago

Oh, ok. Well then your math is fine as is. Just possibly still change your b variable to 5, break it out into a function and then run x = Math.floor(x * (amountOfFingers+1)). Not because the executed logic is much different, just that it's more legible and easier to understand. Making legible code is just a good habit to have.

Collectives™ on Stack Overflow

Javascript if-else interpretation

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related