Using arrows to navigate through table

[FlyingSpoon]

local parts = {
{"Engine", ":guieditor/images/examples/mtalogo.png"},
{"Tuning", ":guieditor/images/examples/mtalogo.png"},
{"Paint", ":guieditor/images/examples/mtalogo.png"},
}

local t = 0

addEventHandler("onClientRender", root,
    function()
	    for i=1, #parts do
		local v = parts[i]
        dxDrawRectangle(527, 130, 202, 127, tocolor(0, 0, 0, 146), false)
        dxDrawText(v[1], 554, 137, 700, 159, tocolor(255, 255, 255, 255), 1.00, "default", "center", "top", false, false, false, false, false)
        dxDrawImage(583, 164, 84, 73, v[2], 0, 0, 0, tocolor(255, 255, 255, 255), false)
		outputChatBox(t)
		end
    end
)

bindKey ("arrow_r", "down", 
function()
t = t + 1 

end)


bindKey ("arrow_l", "down",
function()
t = t - 1

end)

How can I scroll through the stuff using Arrows? Left and Right.

Edited July 31, 2017 by raysmta

[Tails]

local parts = {
{"Engine", ":guieditor/images/examples/mtalogo.png"},
{"Tuning", ":guieditor/images/examples/mtalogo.png"},
{"Paint", ":guieditor/images/examples/mtalogo.png"},
}

local t = 1

addEventHandler("onClientRender", root,
    function()
	local v = parts[t]
	dxDrawRectangle(527, 130, 202, 127, tocolor(0, 0, 0, 146), false)
	dxDrawText(v[1], 554, 137, 700, 159, tocolor(255, 255, 255, 255), 1.00, "default", "center", "top", false, false, false, false, false)
	dxDrawImage(583, 164, 84, 73, v[2], 0, 0, 0, tocolor(255, 255, 255, 255), false)
	outputChatBox(t)
    end
)

bindKey ("arrow_r", "down", 
function()
	t = t ~= #parts and t + 1 or t
end)


bindKey ("arrow_l", "down",
function()
	t = t ~= 1 and t - 1 or t
end)

The thing is: local v = parts[t]. t being the index, no need to loop it.

[FlyingSpoon]

local parts = {
{"Tuning", ":guieditor/images/examples/mtalogo.png"},
{"Engine", ":guieditor/images/examples/mtalogo.png"},
{"Wheels", ":guieditor/images/examples/mtalogo.png"},
{"Paint", ":guieditor/images/examples/mtalogo.png"},
}

local t = 2
local t2 = 1
local t3 = 3

addEventHandler("onClientRender", root,
    function()
	local v = parts[t]
	local v2 = parts[t2]
	local v3 = parts[t3]
	
	dxDrawRectangle(339, 132, 181, 124, tocolor(0, 0, 0, 146), false)
	dxDrawText(v2[1], 339, 142, 520, 165, tocolor(255, 255, 255, 255), 1.00, "default", "center", "center", false, false, false, false, false)
    dxDrawImage(398, 175, 58, 62, v2[2], 0, 0, 0, tocolor(255, 255, 255, 255), false)

    dxDrawRectangle(735, 132, 181, 124, tocolor(0, 0, 0, 146), false)
    dxDrawText(v3[1], 735, 142, 916, 165, tocolor(255, 255, 255, 255), 1.00, "default", "center", "center", false, false, false, false, false)
    dxDrawImage(796, 175, 58, 62, v3[2], 0, 0, 0, tocolor(255, 255, 255, 255), false)
		
	dxDrawRectangle(527, 130, 202, 127, tocolor(0, 0, 0, 146), false)
	dxDrawText(v[1], 554, 137, 700, 159, tocolor(255, 255, 255, 255), 1.00, "default", "center", "top", false, false, false, false, false)
	dxDrawImage(583, 164, 84, 73, v[2], 0, 0, 0, tocolor(255, 255, 255, 255), false)
    end
)

bindKey ("arrow_r", "down", 
function()
	t = t ~= #parts and t + 1 or t
	t2 = t2 ~= #parts and t2 + 1 or t2
	t3 = t3 ~= #parts and t3 + 1 or t3
end)


bindKey ("arrow_l", "down",
function()
	t = t ~= 1 and t - 1 or t
	t2 = t2 ~= 1 and t2 - 1 or t2
	t3 = t3 ~= 1 and t3 - 1 or t3
end)

Any better way of doing this? So it looks like it's moving from left to right, it does what I want it to do, but maybe there's a better way to do it?

Edited July 31, 2017 by raysmta

[NeXuS™]

Can you do a picture of what's happening and what should happen?