【问题标题】:Why isn't this javascript prompt working?为什么这个 javascript 提示不起作用?
【发布时间】:2016-11-16 03:53:33
【问题描述】:
我正在尝试在您输入名称时弹出特定糖果的图像,但只有 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>
【问题讨论】:
标签:
javascript
getelementbyid
prompt
【解决方案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";
}
【解决方案2】:
- 使用 else if 而不是多个 if。
- 尝试使用 return 作为每个 if 语句的最后一个语句。(我不确定这一点,检查)
【解决方案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";
}