CODEWITHSUNDEEP
javascript
F. de Wolf
F. de Wolf

Reputation: 1

Can't get else if condition to work with image in JS

I am trying to make an image appear when the three conditions are met but I only get the BMW image displayed. I just can't seem to see why the else if doesn't work, maybe just looked at it to long. Searched for an other way but didn't find. 

var name = prompt("Hello there, what's your name?");
var car = new Array("BMW", "Maserati");
var randomCar = Math.floor(Math.random()*car.length);
var carName = car[randomCar];

if(name === "Frank" || name === "Chris" && carName === "BMW") {
  document.getElementById("name").innerHTML = "<h1>Hello " + name + " you have won a " + carName + "<br><br>" + "<img src='img/bmw.jpg' alt='BMW Pic' style='border-radius: 10px;'</h1>";
} else if (name === "Frank" || name === "Chris" && carName === "Maserati") {
  document.getElementById("name").innerHTML = "<h1>Hello " + name + " you have won a " + carName + "<br><br>" + "<img src='img/maserati.jpg' alt='Maserati Pic' style='border-radius: 10px;'</h1>";
} else {
  document.getElementById("name").innerHTML = "<h1>Hello " + name + ", no car for you today !!" + "<br><br>" + "<img src='img/pitbull-sad-face.jpg' alt='Dog sadface' style='width: 70%; border-radius: 20px;'</h1>";
};

Upvotes: 0

Views: 47

Answers (2)

Devin Burke
Devin Burke

Reputation: 13820

It's your order of operations. What is happening is that your logic says if frank, or if Chris+BMW when you really want if Frank+BMW or if Chris+BMW. Put parentheses around the or (||) parts.

if((name === "Frank" || name === "Chris") && carName === "BMW") {
  document.getElementById("name").innerHTML = "<h1>Hello " + name + " you have won a " + carName + "<br><br>" + "<img src='img/bmw.jpg' alt='BMW Pic' style='border-radius: 10px;'</h1>";
} else if ((name === "Frank" || name === "Chris") && carName === "Maserati") {
  document.getElementById("name").innerHTML = "<h1>Hello " + name + " you have won a " + carName + "<br><br>" + "<img src='img/maserati.jpg' alt='Maserati Pic' style='border-radius: 10px;'</h1>";
} else {
  document.getElementById("name").innerHTML = "<h1>Hello " + name + ", no car for you today !!" + "<br><br>" + "<img src='img/pitbull-sad-face.jpg' alt='Dog sadface' style='width: 70%; border-radius: 20px;'</h1>";
};

Right now, Frank will always get a BMW because the first if statement passes as true because name==="Frank".

Upvotes: 1

Pointy
Pointy

Reputation: 413720

The tested expression in your if statement:

(name === "Frank" || name === "Chris" && carName === "BMW")

is evaluated as if it were written:

(name === "Frank" || (name === "Chris" && carName === "BMW"))

That is, the && part is evaluated such that the test will succeed if the name is "Frank" or if the name is "Chris" and also the car name is "BMW". If the name is "Frank", then the car name doesn't matter; it only matters when the name is "Chris".

If you want the name to always matter, you have to explicitly parenthesize the two tests for the name:

((name === "Frank" || name === "Chris") && carName === "BMW")

Now it will succeed only if the name is either "Frank" or "Chris" and if the car name is "BMW".

Upvotes: 1

Related Questions