JavaScript-使用DDL更改图像的src

找了一会儿，找不到任何适合我需要的东西。我希望能够将t恤的图像更改为不同颜色，具体取决于在下拉菜单中选择的颜色

以下是DDL：

<select name="Colours" onchange = "changeImage()">
                    <option value="White">White</option>
                    <option value="Red">Red</option>
                    <option value="Blue">Blue</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Purple">Purple</option>
            </select>

白色
红色
蓝色
黄色的
紫色

下面是我编写的JS函数（对每个选项重复switch语句）：

函数changeImage（）{
var x=document.getElementById（“颜色”）.value；
开关（x）{
“白色”案例：
document.Mainimg.src=images/white.jpg；
location.reload（）；
打破
案例“红色”：
document.Mainimg.src=images/red.jpg；
location.reload（）；
打破

最后，如果需要，图像的代码：

                <div id="main_img">
                    <img id="Mainimg" name="Mainpic" src=images/white.jpg>
                </div>

这不起作用，当我在列表中选择一个新选项时，什么都不会发生。我是完全错误的想法，还是只是一个简单的调整

---

感谢您的帮助。

删除

位置。重新加载（）

：重新加载页面时，您将丢失所做的更改。您更改图像的

src

就足以将其加载

使用getElementById获取图像并将URL置于引号之间：

document.getElementById('Mainimg').src = "images/white.jpg";

---

只需使用显示编译错误的控制台即可发现缺少的引号。请使用。

也许您要做的是：

HTML:

CSS:

---

您所指的DDL是什么？如果在控制台中查找并不能解决问题，请进行查找，以便我们可以查看。控制台告诉我在第29行：文档中有一个意外的“（”Mainimg'）。src=“images/white.jpg”.还说没有定义函数changeImage。这很好，但如何用文件路径替换URL？我的图像与每种颜色一起位于文件夹“images”中：“白色”“红色”等。谢谢。只需更改css。您也可以通过执行document.getElementById（'main_img'）。style.backgroundImage='URL来实现同样的效果(“image location.png”）；在javascript函数#main_img.White{background image:url（/images/White.jpg）；我有，但没有图像显示。我做错了什么？还尝试了“”和”“环绕路径没有结果。抱歉，我直到现在才看到您的评论。我已将小提琴更新到此位置。它现在应该可以工作了。请考虑到此解决方案假定您有一个White.png、Yellow.png、Purple.png图像。如果图像位于其他位置，您可以只更新它。”

document.getElementById('Mainimg').src = "images/white.jpg";

<select name="Colours" onchange = "changeImage(this)">
                    <option value="">please select</option>
                    <option value="White">White</option>
                    <option value="Red">Red</option>
                    <option value="Blue">Blue</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Purple">Purple</option>
            </select>
 <div id="main_img">
 </div>

function changeImage(src) {
    var mainImg = document.getElementById('main_img');
    mainImg.style.setProperty('background-image', 'url(\''+ src.value +'.png\')');
}

 #main_img {
        width: 100px;
        height: 100px;
        background-size: contain;
        background-repeat: no-repeat;
    }