javascript - 无法获得 else if 条件来处理 JS 中的图像

Question

我试图在满足三个条件时显示图像，但我只显示 BMW 图像。我似乎不明白为什么 else if 不起作用，也许只是看得太久了。寻找其他方法但没有找到。

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>";
};

Answer 1

if 语句中测试的表达式:

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

被评估，就像它被写成:

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

也就是说，对 && 部分进行评估，以便如果名称为“Frank”，则测试将成功；或者，如果名称为“Chris”并且汽车也是如此名字是“宝马”。如果名字是“Frank”，那么车名并不重要；仅当名字是“Chris”时才重要。

如果您希望名称始终重要，则必须显式地将名称的两个测试放在括号中:

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

现在，只有当名称是“Frank”或“Chris”并且汽车名称是“BMW”时，它才会成功。