Counting Number of Times a Button is Tapped and Table Value

[ebrahimbadkoubi]

Hello,

I have a series of images (stepOne.png, stepTwo.png, stepThree.png, stepFour.png) that I would like to display on the screen One by One when a ‘Next’ button is pressed. 

My initial guess is to create a Counter that would count the number of times I tap on the ‘Next’ button and then tell corona to display.newImageRect from the instructions{} table based on the number of nextCount which will reference to the index number of the value inside the instructions{} table.

I have the following code so far, but it doesn’t do anything when I tap on the ‘Next’ button. What needs to be fixed?

Thanks in advance for helping! 

---- Instructions Table local instructions = { [1] = "stepOne.png", [2] = "StepTwo.png", [3] = "StepThree.png", [4] = "StepFour.png" } local function instructionsfn() --- COUNTING THE NUMBER OF TIMES THE 'NEXT' Button is Tapped local function nextButtonCounter() nextCount = 0 if nextButton.event.phase == "ended" then nextCount = nextCount + 1 for i = nextCount, #instructions do local instructions = display.newImageRect( "images/"..instructions[nextCount], 63.55, 10.66) instructions.x = display.contentWidth \* 0.17 instructions.y = display.contentHeight \* 0.80 end end end

[Alex10]

1. Assuming you are calling instructionsfn() correctly, I don’t see where you are calling nextbuttonCounter().

2. If you mean for nextButtonCounter() to be a touch function, I don’t see where event info is being passed to from the listener.

3. Within the nextButtonCounter(), I don’t see where you are removing the “instructions” display image that is created locally within the for loop.

There are a few other issues, but they would be cleared up with more information and/or modified code addressing the above.

[ebrahimbadkoubi]

Hello Alex,

Thanks for taking the time. 

1. I’m calling the nextButtonCounter() in the ‘create’ phase.

2. The nextButtonCounter() is a “tap” event, and the event is being passed to it as created in top of my code.

3. True, thought I get the display one by one working, and then add the remove part after. 

Please help! 

isplay.setStatusBar( display.HiddenStatusBar ) local composer = require( "composer" ) local widget = require( "widget" ) -- Load scene with same root filename as this file local scene = composer.newScene( sceneName ) --------------------------------------------------------------------------------- local background local nextButton local backButton local exitButton local nextCount = 0 -- For handling the event function of all buttons after they are pressed local function handleButtonEvent( event ) if ( "ended" == event.phase ) then print( "Button was pressed and released" ) end end ---- Instructions Table local instructions = { [1] = "stepOne.png", [2] = "StepTwo.png", [3] = "StepThree.png", [4] = "StepFour.png" } local function instructionsfn() --- COUNTING THE NUMBER OF TIMES THE 'NEXT' Button is Tapped local function nextButtonCounter() nextCount = 0 if nextButton.event.phase == "ended" then nextCount = nextCount + 1 for i = nextCount, #instructions do local instructions = display.newImageRect( "images/projectOne/oneSitePage/"..instructions[nextCount], 63.55, 10.66) instructions.x = display.contentWidth \* 0.17 instructions.y = display.contentHeight \* 0.80 end end end end --------------------------------------------------------------------------------- function scene:create( event ) local sceneGroup = self.view background = display.newImageRect( sceneGroup, "images/projectOne/oneSitePage/bg.png", 570, 380 ) background.x = display.contentWidth / 2 background.y = display.contentHeight / 2 nextButton = display.newImageRect( sceneGroup, "images/projectOne/oneSitePage/next.png", 41.36, 23.18 ) nextButton.x = display.contentWidth \* 0.374 nextButton.y = display.contentHeight \* 0.78 backButton = display.newImageRect( sceneGroup, "images/projectOne/oneSitePage/back.png", 41.36, 23.18 ) backButton.x = display.contentWidth \* 0.374 backButton.y = display.contentHeight \* 0.865 exitButton = display.newImageRect( sceneGroup, "images/projectOne/oneSitePage/exit.png", 41.36, 23.18 ) exitButton.x = display.contentWidth \* 0.374 exitButton.y = display.contentHeight \* 0.95 nextButton:addEventListener("tap", instructionsfn) end function scene:show( event ) local sceneGroup = self.view local phase = event.phase if phase == "will" then end end function scene:hide( event ) local sceneGroup = self.view local phase = event.phase if event.phase == "will" then elseif phase == "did" then end end function scene:destroy( event ) local sceneGroup = self.view end --------------------------------------------------------------------------------- -- Listener setup scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) --------------------------------------------------------------------------------- return scene

[coruscans71]

Hi,

tap event is not touch event.

With touch event, you have 2 phases : began and ended (your listener is called twice)

With tap event, you don’t have phases. Your listener is called once.

So you have to modify your code either by using tap event without phase managing or by using touch event with phase managing.

Moreover you’re nextButtonCounter function is never called. What is called is your instructionsfn function (with addEventListener). And if you want touch management you have to add the event as a parameter of the instructionsfn function.

[jbp1]

As others have mentioned, you’re never calling the function … you define it inside instructionsfn() but never actually call it (unless you’re leaving out some important code).

Just to short-circuit a possible next question:  inside nextButtonCounter(), it looks like you create multiple images inside the for loop … if you know that nextCount=1, why not just display instructions[2]?  no need for a loop at all.  The reason I mention this is that your loop is probably drawing all ‘n’ images on top of each other – so it will appear that there is only 1 image, and it will be the last image, not the correct/currrent-count image.

An option might be to create all ‘n’ images in the scene:create() function but hide most of them (set .isVisible=false for n=2,3,4).  Then as you press the ‘next’ button, flip the isVisible settings (set the current image.isVisible=false, then next-image.isVisible=true).  If your images are huge, this might take up a lot of memory though.

[Alex10]

1. Assuming you are calling instructionsfn() correctly, I don’t see where you are calling nextbuttonCounter().

2. If you mean for nextButtonCounter() to be a touch function, I don’t see where event info is being passed to from the listener.

3. Within the nextButtonCounter(), I don’t see where you are removing the “instructions” display image that is created locally within the for loop.

There are a few other issues, but they would be cleared up with more information and/or modified code addressing the above.

[ebrahimbadkoubi]

Hello Alex,

Thanks for taking the time. 

1. I’m calling the nextButtonCounter() in the ‘create’ phase.

2. The nextButtonCounter() is a “tap” event, and the event is being passed to it as created in top of my code.

3. True, thought I get the display one by one working, and then add the remove part after. 

Please help! 

isplay.setStatusBar( display.HiddenStatusBar ) local composer = require( "composer" ) local widget = require( "widget" ) -- Load scene with same root filename as this file local scene = composer.newScene( sceneName ) --------------------------------------------------------------------------------- local background local nextButton local backButton local exitButton local nextCount = 0 -- For handling the event function of all buttons after they are pressed local function handleButtonEvent( event ) if ( "ended" == event.phase ) then print( "Button was pressed and released" ) end end ---- Instructions Table local instructions = { [1] = "stepOne.png", [2] = "StepTwo.png", [3] = "StepThree.png", [4] = "StepFour.png" } local function instructionsfn() --- COUNTING THE NUMBER OF TIMES THE 'NEXT' Button is Tapped local function nextButtonCounter() nextCount = 0 if nextButton.event.phase == "ended" then nextCount = nextCount + 1 for i = nextCount, #instructions do local instructions = display.newImageRect( "images/projectOne/oneSitePage/"..instructions[nextCount], 63.55, 10.66) instructions.x = display.contentWidth \* 0.17 instructions.y = display.contentHeight \* 0.80 end end end end --------------------------------------------------------------------------------- function scene:create( event ) local sceneGroup = self.view background = display.newImageRect( sceneGroup, "images/projectOne/oneSitePage/bg.png", 570, 380 ) background.x = display.contentWidth / 2 background.y = display.contentHeight / 2 nextButton = display.newImageRect( sceneGroup, "images/projectOne/oneSitePage/next.png", 41.36, 23.18 ) nextButton.x = display.contentWidth \* 0.374 nextButton.y = display.contentHeight \* 0.78 backButton = display.newImageRect( sceneGroup, "images/projectOne/oneSitePage/back.png", 41.36, 23.18 ) backButton.x = display.contentWidth \* 0.374 backButton.y = display.contentHeight \* 0.865 exitButton = display.newImageRect( sceneGroup, "images/projectOne/oneSitePage/exit.png", 41.36, 23.18 ) exitButton.x = display.contentWidth \* 0.374 exitButton.y = display.contentHeight \* 0.95 nextButton:addEventListener("tap", instructionsfn) end function scene:show( event ) local sceneGroup = self.view local phase = event.phase if phase == "will" then end end function scene:hide( event ) local sceneGroup = self.view local phase = event.phase if event.phase == "will" then elseif phase == "did" then end end function scene:destroy( event ) local sceneGroup = self.view end --------------------------------------------------------------------------------- -- Listener setup scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) --------------------------------------------------------------------------------- return scene

[coruscans71]

Hi,

tap event is not touch event.

With touch event, you have 2 phases : began and ended (your listener is called twice)

With tap event, you don’t have phases. Your listener is called once.

So you have to modify your code either by using tap event without phase managing or by using touch event with phase managing.

Moreover you’re nextButtonCounter function is never called. What is called is your instructionsfn function (with addEventListener). And if you want touch management you have to add the event as a parameter of the instructionsfn function.

[jbp1]

As others have mentioned, you’re never calling the function … you define it inside instructionsfn() but never actually call it (unless you’re leaving out some important code).

Just to short-circuit a possible next question:  inside nextButtonCounter(), it looks like you create multiple images inside the for loop … if you know that nextCount=1, why not just display instructions[2]?  no need for a loop at all.  The reason I mention this is that your loop is probably drawing all ‘n’ images on top of each other – so it will appear that there is only 1 image, and it will be the last image, not the correct/currrent-count image.

An option might be to create all ‘n’ images in the scene:create() function but hide most of them (set .isVisible=false for n=2,3,4).  Then as you press the ‘next’ button, flip the isVisible settings (set the current image.isVisible=false, then next-image.isVisible=true).  If your images are huge, this might take up a lot of memory though.