We Keep Coding

I am doing an if statement with multiples of a number

I am doing an exercise, the problem is that my if/else structure does not work properly and I do not know why.
Here is the exercise statement and my code
Your task is to write a function, fizzBuzz, that accepts a number and returns a string:
'fizz' if the number is divisible by 3;
'buzz' if the number is divisible by 5;
'fizzbuzz' if the number is divisible by both 3 and 5.
'{number}' if the number doesn't fulfil any of the above conditions.
function fizzBuzz(number) {
if (number % 3 === 0) {
return "fizz"
};
if (number % 5 === 0) {
return "buzz"
};
if (number % 3 === 0 && number % 5 === 0) {
return "fizzbuz"
};
else return number
}

Try a little mental debugging. Look at your code and run different values through it in your mind:
What happens if you run the value 6 through it?
What happens if you run the value 10 through it?
What happens if you run the value 15 through it?
Ask yourself, "How could I fix this?" (hint: order of operations is important).
Something like this would do what you expect:
function fizzBuzz(n) {
const fizz = n % 3 ? '' : 'fizz' ;
const buzz = n % 5 ? '' : 'buzz' ;
return !fizz && !buzz ? '{number}' : `${fizz}${buzz}` ;
}
or this:
function fizzBuzz( n ) {
let s;
if ( n % 3 === 0 ) {
s = 'fizz' ;
if ( n % 5 === 0 ) {
s = 'fizzbuzz' ;
}
} else if ( n % 5 == 0 ) {
s = 'buzz' ;
} else {
s = '{number}' ;
}
return s;
}
This does [at most] 2 divisions and 2 comparisions.
The former does 2 divisions and 3-4 comparisons, so it is nominally less efficient.
But I know which version I'd rather look at.

The problem is, if a number is divisible by 5 and 3 (ex 15) "fizz" would only be returned (as a factor of 3) because every block {...} terminates the function with a return (this technique is called a "short-circuit", which isn't a bad practice). So you need to put the 5 and 3 condition first. Also that condition had an undefined variable called solution so that would've been the first error. One minor thing is that each block {...} was suffixed with a semi-colon: ; which is just bad formatting but it doesn't affect functionality.
function fB(number) {
if (number % 3 === 0 && number % 5 === 0) {
return "fizzbizz";
}
if (number % 3 === 0) {
return "fizz";
}
if (number % 5 === 0) {
return "bizz";
}
return number;
}
console.log(fB(15));
console.log(fB(575));
console.log(fB(49));
console.log(fB(51));
console.log(fB(80));
console.log(fB(375));
console.log(fB(99));
console.log(fB(Infinity));

Fizzbuzz Example: What is the purpose of the equal-to operator in this example?

I know there are easier and quicker ways to write this program. However, I'm having trouble understanding why the equal-to operator is needed here? Referring to the == 0 instances below.
for(let x=1;x<101;x++) {
if(x % 3 == 0 && x % 5 == 0){
console.log('fizzbuzz')
} else if(x % 3 == 0) {
console.log('fizz')
} else if(x % 5 == 0) {
console.log('buzz')
} else {
console.log(x)
}
}

x % 3 == 0 is checking to see if x is evenly divisible by three. If it isn't, then there will be a non-zero remainder. (The x % 3 part of that expression uses the % operator to get the remainder after division.)

similar to FizzBuzz with a twist

Write a javascript program that displays the numbers from 10 to 100. But for multiples of 4 print "Penny" instead of the number and for multiples of 6 print "Leonard". For numbers which are multiples of both 4 and 6 print "Bazzinga"
I know how to do two parts struggling to print 6 and 4;
function baZzinga (number) {
for (var number = 10; number <= 101; number++)
if(number % 4 == 0) {
console.log("penny");
}
else if (number % 6 == 0) {
console.log("Leonard");
} else if ( not sure what goes here) {
help help help
} else {
console.log(number");
}

You want the and condition first. Try this
var result = document.getElementById("result");
function baZzinga (number) {
for (var number = 10; number <= 101; number++) {
if (number % 4 == 0 && number % 6 == 0) {
result.innerHTML += "Bazinga";
}
else if(number % 4 == 0) {
result.innerHTML += "penny";
}
else if (number % 6 == 0) {
result.innerHTML += "Leonard";
}
else {
result.innerHTML += number;
}
}
}
baZzinga()
<p id="result"></p>
I changed console.log to result.innerHTML because I wanted to demonstrate it in a snippet.

I have a few comments on your code -- constructive criticism, I hope! First, you don't need the number parameter in your bazzinga function. Next, the indentation of the code you posted makes it hard to read. Finally, you should almost always use === instead of ==. The === tests for strict equality, whereas == tries to do some type conversions first (and can therefore produce unexpected results). See the official docs.
To answer you question: check for divisibility by 6 AND 8 first. That way, it will override the individual cases. I believe you want something like this:
function bazzinga() {
for (var number = 10; number <= 100; number++) {
if (number % 4 === 0 && number % 6 === 0) {
console.log("Bazzinga");
} else if (number % 4 === 0) {
console.log("Penny");
} else if (number % 6 === 0) {
console.log("Leonard");
}
}
}

Here is a solution using the format you posted:
for (var number = 10; number <= 100; number++) {
if(number % 4 === 0 && number % 6 === 0){
console.log("bazzinga");
} else if(number % 4 === 0) {
console.log("penny");
} else if (number % 6 === 0) {
console.log("Leonard");
} else {
console.log(number);
}
}
Or use the ternary operator to be even more succinct!
for (var i = 10; i <= 100; i++){
var penny = i % 4 === 0;
var leonard = i % 6 === 0;
console.log(penny ? (leonard ? "bazzinga" : "penny"): leonard ? "leonard" : i);
}

function process_num(num) {
return num % 4 == 0 ? num % 6 == 0 ? "Bazzinga" : "Penny" : num % 6 == 0 ? "Leonard" : num;
}
for (x = 10; x <= 100; x++) { console.log( x + ': is ', process_num(x)) }
Nested Ternary operator for conciseness
If it passes outer ternary test it is divisible by 4:
Enter into nested termary one to test if num is also divisible by 6 for the BaZzinga prize!!
If it fails the BaZzinga challenge, we know it previously passed the divisible by 4 test so print "penny"
Failing the outer ternary condition, we know it's not divisible by 4:
Enter nested ternary two to consider if divisible by 6. If so print "Leonard".
If not it's failed both the outer (div by 4) and inner (div by 6) so return the number unchanged.
Now that the logic is contained in the function, we can just create a for loop to iterate over the required numbers printing out the correct values.

using an if statement inside a while loop

I just figured out how to test for certain conditions and modify output within a loop. But I noticed that testing for two conditionals with the && operator only works in an if/else if/else if/else chain if it's the first one tested for.
Can someone explain why this works:
var number = 0;
var counter = 0;
while (counter < 100) {
number ++;
counter ++;
if (number % 3 == 0 && number % 5 == 0)
console.log ("FizzBuzz");
else if (number % 3 == 0)
console.log("Fizz");
else if (number % 5 == 0)
console.log("Buzz");
else
console.log(number);
}
But this does not?:
var number = 0;
var counter = 0;
while (counter < 100) {
number ++;
counter ++;
if (number % 3 == 0)
console.log("Fizz");
else if (number % 5 == 0)
console.log("Buzz");
else if (number % 3 == 0 && number % 5 == 0)
console.log ("FizzBuzz");
else
console.log(number);
}

An else if, as the name suggests, will only execute when a previous if fails. So the statement else if (number % 3 == 0 && number % 5 == 0) will execute only when if (number % 3 == 0) and else if (number % 5 == 0) fail. If a number is a multiple of 3 and 5 both, then the first if gets successfully executed, and the rest ifs and else-ifs are ignored.
However, in code 1, the ordering of ifs and else-ifs is such that, if a number is divisible by both 3 & 5, then first if is executed, if it is divisible by the only 3, then first if is not executed, only else if (number % 3 == 0) is executed.

Let's make an example using the numbers 6, 10, 15.
The number 6 will execute - in your first example (the working example) - the second if block because in the first one the condition will not be satisfied while the third and fourth block will be ignored, and - in your second example (the not-working example) - will execute the first if block and ignore the other blocks that follow.
The number 10 will execute - in your first example - the third block because the first's and second's condition is not satisfied while the fourth block will be ignored, and - in your second example - will execute the second block, because the condition in the first block is not satisfied, while the blocks that follow will be ignored.
The number 15 will execute - in your first example - the first block and ignore the blocks that follow, and - in your second example - will also execute the first block because the condition is satisfied while the blocks that follow will be ignored.
So, to recap, in your second example, the third if block will never be executed because the condition for its execution is made up of an and of the first and second if block's conditions. In order for the third block to be executed you would need a case where the first if block's condition (let's say c1) and the second if block's condition (let's say c2) are false and c1 && c2 is true, but in order to have c1 && c2 to true you need c1 and c2 to be true, which leads to the execution of the first block and skipping of the rest.

You want to test for if the the number is divisible by three and five, but before you do that you test if it is just divisible by three.
It is, so it follows that branch of logic and never attempts to test if it is divisible by three and five.

Because in your test if the number is a multiple of 3 or 5 then the corresponding if statemetn will get executed before the number % 3 == 0 && number % 5 == 0 statement is reached so it will never get executed.
Let us assume the number is 33, the the first test will become success which is correct, but if the number if 15 then again the first if is success because 15 is a multiple of 3 so even though it is a multiple of 5 also the 3rd condition will not get a chance to execute
To get it correct you may need something like below, where if the number is a multiple of both the versions we skip first 2 conditions
var number = 0;
var counter = 0;
while (counter < 100) {
number++;
counter++;
if (number % 3 == 0 && number % 5 != 0) {
console.log("Fizz");
} else if (number % 5 == 0 && number % 3 != 0) {
console.log("Buzz");
} else if (number % 3 == 0 && number % 5 == 0) {
console.log("FizzBuzz");
} else {
console.log(number);
}
}

Everything that is either evenly divisible by 3 or evenly divisible by 5 has been removed in the second version. By the time it checks to see if a number is divisible by 3 and divisible by 5 there is no chance of it being true because one of the first two clauses already evaluated to be true.
Consider this pseudo code
if( A || B ) return;
if( A && B ) //this code will never execute
and then consider A to be number % 3 == 0 and B to be number % 5 == 0. This is essentially what is happening, and why the last if statement never executes.

What you actually want to test is
if (number % 3 == 0 && number % 5 == 0) …
else if (number % 3 == 0 && number % 5 != 0) …
else if (number % 3 != 0 && number % 5 == 0) …
else if (number % 3 != 0 && number % 5 != 0) …
if you'd write out the four cases.
Only you don't need to be that explicit, because when the previous conditions already did not match (and you are in the else branch), then those != 0 are implied and you can omit them. However, order matters, as the conditions are tested consecutively.
So if you have the fully qualified conditions, you can shuffle their order as you want:
if (number % 3 == 0 && number % 5 != 0) … // move to front
else if (number % 3 != 0 && number % 5 == 0) …
else if (number % 3 == 0 && number % 5 == 0) …
else if (number % 3 != 0 && number % 5 != 0) …
and then continue to simplify conditions, omitting the parts that are already implied by their parent cases:
if (number % 3 == 0 && number % 5 != 0)
console.log("Fizz");
else if (number % 3 != 0 && number % 5 == 0) // (an == instead of the && would suffice)
console.log("Buzz");
else if (number % 3 == 0) // as it didn't match the first condition, we know that % 5 == 0
console.log("FizzBuzz");
else // here we know that % 3 != 0 && % 5 != 0
console.log(numer);
Other permutations of the condition let us use as few as in your original example, like
if (number % 3 == 0 && number % 5 != 0)
console.log("Fizz");
else if (number % 3 == 0) // as it didn't match the first condition, we know that % 5 == 0
console.log("FizzBuzz");
else if (number % 5 == 0) // as it didn't match the first condition, we know that % 3 != 0
console.log("Buzz");
else // here we know that % 3 != 0 && % 5 != 0
console.log(numer);
And the minimum number of tests would be achievable by nesting them:
if (number % 3 == 0)
if (number % 5 == 0)
console.log("FizzBuzz");
else
console.log("Fizz");
else
if (number % 5 == 0)
console.log("Buzz");
else
console.log(numer);

Understanding Difference in results between two code solutions

I am newbie here in more way than one, so please go easy on me :)
Here is a problem I was tasked with solving using javascript:
Print out the numbers from 1 - 20.
The rules:
For numbers divisible by 3, print out "Fizz".
For numbers divisible by 5, print out "Buzz".
For numbers divisible by both 3 and 5, print out "FizzBuzz" in the console.
Otherwise, just print out the number.
Here was my first attempt at approaching it:
var numberArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
for(var i = 0; i < numberArray.length; i++){
if(i % 3 === 0 && i % 5 === 0){
console.log("FizzBuzz");
}
else if(i % 3 === 0 && i % 5 !== 0){
console.log("Fizz");
}
else if(i % 3 !== 0 && i % 5 === 0){
console.log("Buzz");
}
else {
console.log(numberArray[i]);
}
}
This returned the following incorrect values:
FizzBuzz
2
3
Fizz
5
Buzz
Fizz
8
9
Fizz
Buzz
12
Fizz
14
15
FizzBuzz
17
18
Fizz
20
I then took a different approach which DID result in the correct answer:
var fizBuzz = function() {
for (i = 1; i < 21; i++) {
if (i % 3 === 0 && i%5 === 0) {
console.log ("FizzBuzz");
} else if (i % 3 === 0) {
console.log ("Fizz");
} else if (i % 5 === 0) {
console.log ("Buzz");
} else {
console.log (i);
}
}
};
fizBuzz();
Would someone be willing to help me understand what was wrong about the first approach? This is really bothering me :)

The problem is you were checking the divisibility of i (which starts at 0) rather than of numberArray[i] (which starts at 1).