javascript - 使用html按钮用Javascript修改img src

Question

我正在尝试制作一个包含 25 张图片的网页，一次显示一张图片。这 25 张图像都是两组五个项目的组合。在这种情况下，这两个集合是( Ant 、蓝莓、瓢虫、棉花糖、蘑菇)和(飞艇、卡车、月亮、海洋、红木)，所以例如一个图像是“ Ant +飞艇”，另一个图像是“ Ant ” + 卡车”等。我们的想法是为每件东西设置一个按钮，当用户点击每个按钮时，将调出相应的图像。

我是 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>

在下面我有以下 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>

该站点目前正在运行，可以调出初始设置的图像(蘑菇 + 卡车图像)，但单击按钮没有任何反应。

我怀疑问题是页面没有重复处理 img src 行，所以即使变量发生变化，图像也没有更新。那是对的吗？如果是这样，我该如何解决？

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

这是正在运行的网站(不完全是):http://www.smallthingseatingbigthings.com/

Answer 1

你完全正确!

您只是在页面加载时更改图像的来源。要纠正这个问题，您只需要将更改也放入函数中即可。这将确保按下按钮时，不仅会更改变量 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 small;
    var big;
    
    var small = "mushroom";
    var big = "truck";
    
    function smallFunction(x){
    small = x;
    document.getElementById("thepic").src = "round1/" + small + "/" + big + ".png";
    console.log(document.getElementById("thepic").src);
    }
    
    function bigFunction(y){
    big = y;
    document.getElementById("thepic").src = "round1/" + small + "/" + big + ".png";
    console.log(document.getElementById("thepic").src);
    }
    
    document.getElementById("thepic").src = "round1/" + small + "/" + big + ".png";
    console.log(document.getElementById("thepic").src);

<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>