使用html按钮用Javascript修改img src

我试图使一个网页有25个图像，其中一个图像显示在一个时间。这25幅图片都是两组五个项目的组合。在这种情况下，这两组是（蚂蚁、蓝莓、瓢虫、棉花糖、蘑菇）和（飞艇、卡车、月亮、海洋、红木），因此，例如，一个图像将是“蚂蚁+飞艇”，另一个图像将是“蚂蚁+卡车”等。想法是为每件事都有一个按钮，当用户单击每个按钮时，将调用相应的图像

我是javascript的新手

我将图像分为五个不同的文件夹，每个文件夹以第一组内容命名，每个文件夹中的图像名为XXXX.png，其中XXXX是第二组内容中的内容

我制作了如下按钮：

<button onclick="smallFunction('ant')">Ant</button>
<button onclick="smallFunction('blueberry')">Blueberry</button>
<button onclick="smallFunction('ladybug')">Ladybug</button>
<button onclick="smallFunction('marshmallow')">Marshmallow</button>
<button onclick="smallFunction('mushroom')">Mushroom</button>
<p>

<img id="thepic" src="round1/ladybug/blimp.png" style="width:80%"><p>

<button onclick="bigFunction('blimp')">Blimp</button>
<button onclick="bigFunction('truck')">Cement Truck</button>
<button onclick="bigFunction('moon')">The Moon</button>
<button onclick="bigFunction('ocean')">The Pacific Ocean</button>
<button onclick="bigFunction('redwood')">Redwood Tree</button>

<p>

Ant
蓝莓
瓢虫
棉花糖
蘑菇


小型软皮艇
水泥车
月亮
太平洋
红杉树

下面我有以下Javascript：

<script>
var small;
var big;

var small = "mushroom";
var big = "truck";

function smallFunction(x){
small = x;
}

function bigFunction(y){
big = y;
}

document.getElementById("thepic").src = "round1/" + small + "/" + big + ".png";

</script>

var小；
var大；
var small=“蘑菇”；
var big=“卡车”；
函数smallFunction（x）{
小=x；
}
函数bigFunction（y）{
大=y；
}
document.getElementById（“thepic”）.src=“round1/”+small+“/”+big+”.png”；

该站点在当前工作时，可以调用最初设置的图像（蘑菇+卡车图像），但单击按钮不起任何作用

我怀疑问题在于页面没有重复处理img src行，因此即使变量发生变化，图像也不会更新。对吗？如果是，我该如何解决

也有可能变量实际上没有随着我编写的代码而改变

这是正在运行的站点：

你完全正确

您仅在页面加载时更改图像的源。要纠正这一点，您只需将该更改也放入函数中。这将确保按下按钮时，不仅会更改变量

small

或

big

，还会相应地调整图像

var small;
var big;

var small = "mushroom";
var big = "truck";

function smallFunction(x){
small = x;
document.getElementById("thepic").src = "round1/" + small + "/" + big + ".png";
}

function bigFunction(y){
big = y;
document.getElementById("thepic").src = "round1/" + small + "/" + big + ".png";
}

document.getElementById("thepic").src = "round1/" + small + "/" + big + ".png";

功能的一个示例：

var小；
var大；
var small=“蘑菇”；
var big=“卡车”；
函数smallFunction（x）{
小=x；
document.getElementById（“thepic”）.src=“round1/”+small+“/”+big+”.png”；
log（document.getElementById（“thepic”）.src）；
}
函数bigFunction（y）{
大=y；
document.getElementById（“thepic”）.src=“round1/”+small+“/”+big+”.png”；
log（document.getElementById（“thepic”）.src）；
}
document.getElementById（“thepic”）.src=“round1/”+small+“/”+big+”.png”；
log（document.getElementById（“thepic”）.src）
Ant
蓝莓
瓢虫
棉花糖
蘑菇


小型软皮艇
水泥车
月亮
太平洋
红杉树
非常感谢您！这解决了问题@桑杰，没问题！你问问题做得很好。欢迎来到StackOverflow！