时间戳

首页 > 解决方案 > 使用 html 按钮通过 Javascript 修改 img src

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

问题描述

我正在尝试制作一个包含 25 张图像的网页，一次显示一张图像。这 25 张图片都是两组五个项目的组合。在这种情况下，这两组是（蚂蚁，蓝莓，瓢虫，棉花糖，蘑菇）和（飞艇，卡车，月亮，海洋，红木），所以例如一个图像是“ant + blimp”，另一个图像是“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/

标签： javascripthtml

解决方案

你完全正确！

您只是在页面加载时更改图像的来源。要纠正这个问题，您只需将该更改也放入函数中。这将确保当按下按钮时，不仅会改变变量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>

推荐阅读