Use html buttons to modify img src with Javascript

Question

I am attempting to make a webpage with 25 images where one image is displayed at a time. The 25 images are all combinations of two sets of five items. In this case the two sets are (ant, blueberry, ladybug, marshmallow, mushroom) and (blimp, truck, moon, ocean, redwood), so for instance one image would be "ant + blimp", another image would be "ant + truck" etc. The idea is to have a button for each thing, and as users click each button, the appropriate image would be called up.

I am a novice with javascript.

I have the images sorted into five different folders, each named after the first set of things, and in each folder the image is named XXXX.png, where XXXX is something in the second set of things.

I have made buttons like this:

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

and below that I have the following 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>

The site, as it currently is working, can call up the initially set image (the mushroom + truck image), but clicking the buttons does nothing.

I suspect the problem is that the page is not repeatedly processing the img src line, so even as the variables change, the image is not updating. Is that correct? If so, how do I fix that?

It's also possible the variables aren't actually changing with the code I've written.

This is the site (not quite) in action: http://www.smallthingseatingbigthings.com/

zfrisch · Accepted Answer · 2018-10-16 17:43:04Z

1

You're exactly right!

You are only changing the source of the image when the page loads. To rectify this you simply need to put that change into the functions as well. This will ensure that when the buttons are pressed, not only will the variable small or big be changed, but the image will be adjusted accordingly.

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

An example of the functionality:

    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>

edited Oct 16, 2018 at 17:43

answered Oct 16, 2018 at 17:39

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sanjay Over a year ago

Thank you so much! That fixed the problem!

zfrisch Over a year ago

@Sanjay It's no problem! You did a great job asking your question. Welcome to StackOverflow!

Collectives™ on Stack Overflow

Use html buttons to modify img src with Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related