Почему не работает этот javascript?

Question

Я пытаюсь сделать изображения конкретной конфеты всплывающие при вводе имени, но работает только Ghirardelli.

<p id="chocolate"></p> 
<img src="hershey.jpg" id="pic"> 
<script> 
var y = prompt("What would you like to see a picture of?"); 
if (y == "Hershey") 
{ 
    document.getElementById("chocolate").innerHTML="Hershey"; 
} 
if (y == "Reeses") 
{ 
    document.getElementById("chocolate").innerHTML="Reeses"; 
    document.getElementById("pic").src="reeses.jpg"; 
} 
if (y == "Ghiradelli") 
{ 
    document.getElementById("chocolate").innerHTML="Ghiradelli"; 
    document.getElementById("pic").src="ghiradelli.jpg"; 
} 
else 
{ 
    document.getElementById("chocolate").innerHTML="Please choose one of these three things: <ul><li>Hershey</li><li>Reeses</li><li>Ghiradelli</li></ul>"; 
    document.getElementById("pic").src="x.svg"; 
} 
</script> 

Answer 1

Это потому, что у вас есть только один else в целом вещь. Первые два оператора if работают независимо. Они работают, но окончательный if неверен, когда они есть, поэтому логика в else перезаписывает все, что делали первые два if.

Просто сделайте все остальное else if.

var y = prompt("What would you like to see a picture of?"); 
if (y == "Hershey") 
{ 
    document.getElementById("chocolate").innerHTML="Hershey"; 
} 
else if (y == "Reeses") 
{ 
    document.getElementById("chocolate").innerHTML="Reeses"; 
    document.getElementById("pic").src="reeses.jpg"; 
} 
else if (y == "Ghiradelli") 
{ 
    document.getElementById("chocolate").innerHTML="Ghiradelli"; 
    document.getElementById("pic").src="ghiradelli.jpg"; 
} 
else 
{ 
    document.getElementById("chocolate").innerHTML="Please choose one of these three things: <ul><li>Hershey</li><li>Reeses</li><li>Ghiradelli</li></ul>"; 
    document.getElementById("pic").src="x.svg"; 
} 

Answer 2

1. Используйте еще, если вместо множественного если.
2. Попробуйте использовать возвращение в качестве последнего заявления каждого, если заявления. (Я не уверен в этом пункте, проверки)

Answer 3

Ваших если заявления не все были достигнуты. Общим решением этой проблемы является очистка вашего кода с помощью инструкций else или if или с помощью оператора switch. Кроме того, я пытался абстрагироваться от того, чтобы использовать слишком много document.getElementById заявления

<p id="chocolate"></p> 

<img src="hershey.jpg" id="pic"> 

<script> 

//sets variable y to the response in the promt 
var y = prompt("What would you like to see a picture of?"); 

//sets the chocolate paragraph variable 
var chocolate = document.getElementById("chocolate"); 

//sets the pic image variable 
var pic = document.getElementById("pic"); 

//checks for different cases of y, use switch statements when there are too  many if statements 
switch (y) { 
case "Hershey": 
    chocolate.innerHTML="Hershey"; 
    break; 
case "Reeses": 
    chocolate.innerHTML="Reeses"; 
    pic.src="reeses.jpg"; 
    break; 
case "Ghiradelli": 
    chocolate.innerHTML="Ghiradelli"; 
    pic.src="ghiradelli.jpg"; 
    break; 
default: 
    chocolate.innerHTML="Please choose one of these three things: <ul> <li>Hershey</li><li>Reeses</li><li>Ghiradelli</li></ul>"; 
    pic.src="x.svg"; 
}