外部JavaScript和下拉菜单在浏览器中未正确呈现
我正在尝试创建一个下拉菜单，该菜单使用一个外部Javascript函数/文件进行调用，并根据用户的选择替换图片，但由于某些原因，图片不会更改。下拉菜单和默认图像一起显示，因为它是硬编码的，但是图片没有改变。这是我第一次使用JavaScript，所以我确信它充满了错误，但任何帮助都将不胜感激。我真的不知道我在做什么 以下是HTML：外部JavaScript和下拉菜单在浏览器中未正确呈现,javascript,html,switch-statement,Javascript,Html,Switch Statement,我正在尝试创建一个下拉菜单，该菜单使用一个外部Javascript函数/文件进行调用，并根据用户的选择替换图片，但由于某些原因，图片不会更改。下拉菜单和默认图像一起显示，因为它是硬编码的，但是图片没有改变。这是我第一次使用JavaScript，所以我确信它充满了错误，但任何帮助都将不胜感激。我真的不知道我在做什么 以下是HTML： <!DOCTYPE html> <html> <head> <title>All Seasons</
<!DOCTYPE html>
<html>
<head>
<title>All Seasons</title>
</head>
<body>
<script src = "allseasons.js"></script>
<img id="myimage" src="winter.jpg" alt="current season." />
<select name="seasons">
<option>
Winter
<button onclick="changepic('winter')"></button>
</option>
<option>
Spring
<button onclick="changepic('spring')"></button>
</option>
<option>
Summer
<button onclick="changepic('summer')"></button>
</option>
<option>
Fall
<button onclick="changepic('fall')"></button>
</option>
</select>
</body>
</html>
最好将您的
功能变更pic（季节）{
开关（季节）{
案例“winter”：document.getElementById（'myimage'）。src='10〕https://s1.postimg.org/40ndqhnyfv/image.jpg';
打破
案例'spring'：document.getElementById（'myimage'）。src='10〕https://s1.postimg.org/85iz2llc8b/image.jpg';
打破
案例“summer”：document.getElementById（'myimage'）。src='10〕https://s1.postimg.org/40ndqhnyfv/image.jpg';
打破
案例'fall'：document.getElementById（'myimage'）。src='1！'https://s1.postimg.org/85iz2llc8b/image.jpg';
打破
}
log（'当前图像为：'+document.getElementById（'myimage'）.src）；
}
冬天
春天
夏天
落下
最好将
标签放在
使用本机Javascript，您可以这样做：
功能变更pic（季节）{
开关（季节）{
案例“winter”：document.getElementById（'myimage'）。src='10〕https://s1.postimg.org/40ndqhnyfv/image.jpg';
打破
案例'spring'：document.getElementById（'myimage'）。src='10〕https://s1.postimg.org/85iz2llc8b/image.jpg';
打破
案例“summer”：document.getElementById（'myimage'）。src='10〕https://s1.postimg.org/40ndqhnyfv/image.jpg';
打破
案例'fall'：document.getElementById（'myimage'）。src='1！'https://s1.postimg.org/85iz2llc8b/image.jpg';
打破
}
log（'当前图像为：'+document.getElementById（'myimage'）.src）；
}
冬天
春天
夏天
落下
不建议将按钮放在选择下拉选项中。您应该在选择元素上侦听事件，并在那里进行处理。在change功能中，通过向所有选项添加value
属性，您可以轻松访问下拉列表中选择的选项
因此，带有change
事件的代码如下所示-
$（文档）.ready（函数（）{
$（“#季节下拉”）.change（函数（）{
var SECTIONVALUE=document.getElementById（'SECTIONSDROPDOWN'）.value；
开关（值）{
案例'winter'：document.getElementById（'myimage'）.src='winter.jpg'；
打破
案例'spring'：document.getElementById（'myimage'）.src='spring.jpg'；
打破
案例“summer”：document.getElementById（'myimage'）.src='summer.jpg'；
打破
案例'fall'：document.getElementById（'myimage'）.src='fall.jpg'；
打破
}
});
});
冬天
春天
夏天
落下
不建议将按钮放在选择下拉选项中。您应该在选择元素上侦听事件，并在那里进行处理。在change功能中，通过向所有选项添加value
属性，您可以轻松访问下拉列表中选择的选项
因此，带有change
事件的代码如下所示-
$（文档）.ready（函数（）{
$（“#季节下拉”）.change（函数（）{
var SECTIONVALUE=document.getElementById（'SECTIONSDROPDOWN'）.value；
开关（值）{
案例'winter'：document.getElementById（'myimage'）.src='winter.jpg'；
打破
案例'spring'：document.getElementById（'myimage'）.src='spring.jpg'；
打破
案例“summer”：document.getElementById（'myimage'）.src='summer.jpg'；
打破
案例'fall'：document.getElementById（'myimage'）.src='fall.jpg'；
打破
}
});
});
冬天
春天
夏天
落下
您的img
没有myimage
的ID。你需要像
@ShekharChikara那样对它进行分类，我修复了这个问题，但它仍然没有切换图像。你的img
没有myimage
的ID。你需要像
@ShekharChikara那样对它进行分类，我已经修复了，但它仍然没有切换图像。谢谢你@Chrysovalantis Koutsoumpos！然而，画面仍然没有改变。所有文件都在同一目录中，并且具有相同的扩展名。我们缺少了什么吗？我用一些原始图像更新了代码，以证明它工作正常。问题是你的图像有问题。确保名称和结尾正确或使用完整路径明白了吗！我必须按照你的建议移动脚本标签。我真的非常感谢你的帮助！我很高兴能帮上忙。你可以通过投票给我正确的答案来帮助我获得一些分数非常感谢@Chrysovalantis Koutsoumpos！然而，画面仍然没有改变。所有文件都在同一目录中，并且具有相同的扩展名。我们缺少了什么吗？我用一些原始图像更新了代码，以证明它工作正常。问题是你的图像有问题。确保名称和结尾正确或使用完整路径明白了吗！我必须按照你的建议移动脚本标签。我真的非常感谢你的帮助！我很高兴能帮上忙。你可以通过投票给我正确的答案来帮助我获得一些分数
function changepic(season){
switch (season){
case 'winter': document.getElementById('myimage').src='winter.jpg';
break;
case 'spring': document.getElementById('myimage').src='spring.jpg';
break;
case 'summer': document.getElementById('myimage').src='summer.jpg';
break;
case 'fall': document.getElementById('myimage').src='fall.jpg';
break;
}