为什么这个 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

使用 else if 而不是 multiple if。
尝试使用return作为每个if语句的最后一个语句。（我不确定这一点，检查）

Answer 3

您的 if 语句未全部到达。此问题的常见解决方案是使用 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";
}

为什么这个 javascript 提示不起作用？

Why isn't this javascript prompt working?

javascript

prompt

getelementbyid