为什么此javascript提示不起作用？

Question

I am trying to make images of the specific candy pop up when you type in its name but only Ghirardelli works.

<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

That's because you only have one else in the whole thing. The first two if statements are operating independently. They work, but the final if is not true when they are, so the logic in the else overwrites anything the first two if 's did.

Just make the rest 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. Use else if instead of multiple if.
2. Try using return as the last statement of each if statement.(I am not sure about this point, checking)

Answer 3

Your if statements are not all being reached. A common solution to this problem is to clean up your code with either else if statements or using a switch statement. Also, I tried to abstract away from having to use too many document.getElementById statements

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