Question

我正在尝试制作一个包含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>

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

使用html按钮用Javascript修改img src

1 个答案: