Click text button to change image label multiple times

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!
    So my end goal is to make a script which as the title states changes its image when a text button is clicked. I also would want the script to continue changing to a different image after being clicked a second time (and so fourth)

  2. What is the issue? Include screenshots / videos if possible!
    Ive made a very rough script of what i mean and it basically i guess detects (or atleast tries to) what image is being shown and then depending on what image is being shown it changes to a different image. Problem is it doesnt work and the output doesnt seem to tell me anything so im kinda in the dark.

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    Ive tried to instead use a string table which worked wonderfully on gui button that always stays on the screen but i might as well make it clear now. The string table method does not work with the text button i have due to the fact that the text button gets destroyed when it isnt being used and then clones itself to reappear again. this means that whenever it clones itself, it goes back to the beginning of the table and just infinitley changes to the first image.

After that, you should include more details if you have any. Try to make your topic as descriptive as possible, so that it’s easier for people to help you!

i have a little excerpt of the monstrosity of the code

local Image = script.Parent.Parent.ImageLabel.Image

script.Parent.Mousebutton1Click:Connect(function()
    if Image == "rbxassetid://643245156" 
    then Image = "rbxassetid://14668577681" 
    else if Image == "rbxassetid://14668577681"
        then Image = "rbxassetid://643245156"

        end
    end
end)

indirect change, u referencing direct value instead of referencing it from object

local Image = script.Parent.Parent.ImageLabel

script.Parent.Mousebutton1Click:Connect(function()
    if Image.Image == "rbxassetid://643245156" 
    then Image.Image = "rbxassetid://14668577681" 
    else if Image.Image == "rbxassetid://14668577681"
        then Image.Image = "rbxassetid://643245156"

        end
    end
end)

It sounds like you’ve already taken a look at tables but I’d suggest going back to that approach.
Reason for it is it makes it a lot easier to maintain and add more images later on, or change them if you want to. Right now you need to have them all hardcoded and check against each of them one by one, but if you pull them out of a table instead, you can have that entire portion of it just abstracted away.

Otherwise it’s like David said, the problem is that you’re referencing Image, which ends up creating a variable and only changing that variable’s value. You should reference the object instead, so that any updates you make apply to that image label.

So here’s how I’d do it:

-- Table of images. Each of these is the link to the decal to display.
-- Importantly, these are in order; the first is displayed first, second is next, etc.
local images = {
	"rbxassetid://643245156",
	"rbxassetid://14668577681",
	"rbxassetid://643245156"
}
local imageIndex = 1

local Image = script.Parent.Parent.ImageLabel

script.Parent.MouseButton1Click:Connect(function()
    -- We'll want to take the next image.
    imageIndex = imageIndex + 1
    
    -- Wrap around if we reach the end of the array
    if imageIndex == #images then
        imageIndex = 1
    end

    -- Apply the image
    Image.Image = images[imageIndex]
end)

Note as well in here that I added a bit for wrapping the image around, so that if it reaches the last one and is clicked again it’ll restart from the first. If you don’t want that you’d need to change the three lines where it checks if it’s reached the end of the table, and change it to do nothing if it’s past that instead.

Apologies if i may sound a bit confused but i presume this would also go under the text button as a local script like what i did originally or do i put this somewhere else? Cause even after the suggested edits you made it still doesnt seem to be changing to the images for some reason.

I ran into the same problem as i did using the table method before. Once again this worked amazingly with a text button that stayed on the screen but with the text button ive used which destroys itself when its not needed and then clones itself to reappear when its needed, this means everytime it goes back into existance by beling cloned it thinks its at the start of the script and just infinitley changes to the first image whenever the button is cloned. But thats basically just me repeating what i said in the post so

Is this script inside the text button? That might be the reason for it.

I’d change it to be something globalized instead (either in some parent that won’t be removed, or within a ModuleScript) and then have it run this same code for every button that gets added (so all it should need is adding the event handler, and everything else would be consistent across all of them).

I think what I’d do here is to add a ModuleScript with this code:

-- Table of images. Each of these is the link to the decal to display.
-- Importantly, these are in order; the first is displayed first, second is next, etc.
local images = {
	"rbxassetid://643245156",
	"rbxassetid://14668577681",
	"rbxassetid://643245156"
}
local imageIndex = 1

return function(ImageLabel)
    -- We'll want to take the next image.
    imageIndex = imageIndex + 1
    
    -- Wrap around if we reach the end of the array
    if imageIndex == #images then
        imageIndex = 1
    end

    -- Apply the image
    ImageLabel.Image = images[imageIndex]
end

And then have the button itself with this:

local onButtonClick = require(...PathToModule)
local imageLabel = script.Parent.Parent.ImageLabel
script.Parent.MouseButton1Click:Connect(function() onButtonClick(imageLabel) end)

You should just need to replace the PathToModule, and from there it should work

1 Like

Yoooo this actually works! Thank dude very much appreciated

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.