# App Lab - How to create a home button across multiple screens **URL:** \ **Category:** Uncategorized\ **Tags:** applab\ **Created:** [December 10, 2018, 11:16pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357 "2018-12-10T23:16:37Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![jpverhaeghe](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jpverhaeghe](https://forum.code.org/u/jpverhaeghe)\ **Post date:** [December 10, 2018, 11:16pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/1 "2018-12-10T23:16:37Z")
I have students playing with App Lab and attempting to make multi-screen apps. They are running into issues where they want a button that persists across the screens so they don’t have to duplicate the code for each button. Is this possible, or should I just have them create a function that does the screen swapping and have them call that function for each button they make? ---
**Author:** ![gjschmidt](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gjschmidt/32/4922_2.png) [@gjschmidt](https://forum.code.org/u/gjschmidt)\ **Post date:** [December 11, 2018, 1:01am UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/2 "2018-12-11T01:01:23Z")
I don’t think there is a way to make a button that lives across different screens. Having the onEvent for each of the buttons simply call the same function is certainly one way to do this and will keep the code minimized. ---
**Author:** ![jpverhaeghe](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jpverhaeghe](https://forum.code.org/u/jpverhaeghe)\ **Post date:** [December 19, 2018, 8:36pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/3 "2018-12-19T20:36:27Z")
This does work, though you can’t call the function in the onEvent without using a function to call it, which seems weird. Why can’t you use a function call as your OnEvent. I’ve attached a link to a program that shows this issue for any that care to look into it. Perhaps I’m missing something. > **[Check out what I made](https://studio.code.org/projects/applab/I4IS9muNeS4csKo2OJQpMUPRVcDwfkSU6c_8JzwOWnE)** > > I wrote the code myself with Code.org You’ll notice that the onEvents for meme1 through mem3 work as intended. They have a wrapper function calling the desired function. However, meme4 through meme6 do not work by just putting the function call inside the onEvent. I would expect it to work the same. Also, I’ve noticed that the hidephotos function is called three times, even though the events aren’t called. Why would that be? ---
**Author:** ![jpverhaeghe](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jpverhaeghe](https://forum.code.org/u/jpverhaeghe)\ **Post date:** [December 19, 2018, 8:45pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/4 "2018-12-19T20:45:20Z")
I figured out why it is calling the hidephotos multiple times. It turns out that if you put the function inside the onEvent like I do for meme4 through meme6, it calls that function immediately. This also seems to act differently as to how I would expect it to work. Shouldn’t it call the function when the event happens. ---
**Author:** ![josh](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/josh/32/868_2.png) [@josh](https://forum.code.org/u/josh)\ **Post date:** [December 19, 2018, 9:38pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/5 "2018-12-19T21:38:10Z")
The tricky bit here is that the callback function for `onEvent` has to be a function _reference_ and not a function _call_. Eg: `onEvent("meme1", "click", hidephotos);` instead of `onEvent("meme1", "click", hidephotos("meme1"));` This means that you can’t pass a different parameter to each of the events. _However_, any function used as an `onEvent` callback gets passed an object that contains information about the event, including the ID of the element that was clicked on. So one approach to solving this problem is to pass `hidephotos` as the callback to each of the event handlers, and then modify `hidephotos` so that it takes the event object instead of the id directly. Eg: ```javascript function hidephotos(event) { // pull the element ID out of the event object var memeID = event.targetId; ... } ``` [Here’s a remix of the project showing this method in action](https://studio.code.org/projects/applab/aqkEkMoPUp2JrZUOCkEkLg/view) ---
**Author:** ![jpverhaeghe](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jpverhaeghe](https://forum.code.org/u/jpverhaeghe)\ **Post date:** [December 19, 2018, 9:42pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/6 "2018-12-19T21:42:47Z")
Yes that’s it. Not realizing that it had that specific syntax is why we were having issues. Why does it call the function if it is not a reference? Should that happen, or could it show a warning message that might make the problem more clear instead? ---
**Author:** ![josh](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/josh/32/868_2.png) [@josh](https://forum.code.org/u/josh)\ **Post date:** [December 19, 2018, 9:53pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/7 "2018-12-19T21:53:27Z")
In the original app you sent I see the error `WARNING: Line: 30: onEvent() callback parameter value (undefined) is not a function.` which could definitely be clearer, but is happening because the function call returns undefined. The events that were working _are_ using function references, they just happen to be anonymous functions that are defined in place. Ie ```javascript onEvent("meme1", "click", function() { hidephotos("meme1"); }); ``` is equivalent to ```javascript onEvent("meme1", "click", function showphotos() { hidephotos("meme1"); }); ``` is equivalent to ```javascript function showphotos() { hidephotos("meme1"); } onEvent("meme1", "click", showphotos); ``` ---
**Author:** ![josh](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/josh/32/868_2.png) [@josh](https://forum.code.org/u/josh)\ **Post date:** [December 19, 2018, 9:56pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/8 "2018-12-19T21:56:07Z")
And to make the final leap to my example ```javascript function showphotos(event) { var memeID = event.targetId; hidephotos(memeID); } onEvent("meme1", "click", showphotos); ``` ---
**Author:** ![jpverhaeghe](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jpverhaeghe](https://forum.code.org/u/jpverhaeghe)\ **Post date:** [January 9, 2019, 4:57pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/9 "2019-01-09T16:57:23Z")
Thanks that helped. We adjusted to your examples, and it works well now. ---
**Author:** ![kookooloopdaking](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/kookooloopdaking/32/5224_2.png) [@kookooloopdaking](https://forum.code.org/u/kookooloopdaking)\ **Post date:** [December 9, 2019, 4:07pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/10 "2019-12-09T16:07:38Z")
you can’t have a home button across multiple screens, you need to have multiple buttons (with the same code) for each screen. ---
**Author:** ![briggsbanigo3](https://avatars.discourse-cdn.com/v4/letter/b/edb3f5/32.png) [@briggsbanigo3](https://forum.code.org/u/briggsbanigo3)\ **Post date:** [August 4, 2020, 8:29pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/11 "2020-08-04T20:29:52Z")
Use the set parent function `function homeButton(element, screen){ setParent(element, screen); }` ---
**Author:** ![msouza](https://avatars.discourse-cdn.com/v4/letter/m/a9adbd/32.png) [@msouza](https://forum.code.org/u/msouza)\ **Post date:** [October 1, 2020, 3:26pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/12 "2020-10-01T15:26:14Z")
Can you provide an example of a program? It would be very helpful for those starting. ---
**Author:** ![alan\_schmitt](https://avatars.discourse-cdn.com/v4/letter/a/7bcc69/32.png) [@alan\_schmitt](https://forum.code.org/u/alan_schmitt)\ **Post date:** [October 8, 2020, 2:37pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/13 "2020-10-08T14:37:19Z")
I had a student ask how to move elements from one screen to another and I got thinking and came up with a solution, so this would allow you to make a home button that works across screens, but it’s advanced and complicated and probably not useful to beginners. Here it is, in case you want to check it out: [https://studio.code.org/projects/applab/LU-PgtktwxF8rYhA1jMVebJBNQSSbDjN9ekn220E7O4/view](https://studio.code.org/projects/applab/LU-PgtktwxF8rYhA1jMVebJBNQSSbDjN9ekn220E7O4/view) ---
**Author:** ![wutadam](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/wutadam/32/7711_2.png) [@wutadam](https://forum.code.org/u/wutadam)\ **Post date:** [January 10, 2022, 1:07pm UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/14 "2022-01-10T13:07:58Z")
You could create a function called `changeScreen()` and use it instead of `setScreen()`. Then you could use `setParent()` to change the screen that the Home button is on. ```auto function changeScreen(screen) { setScreen(screen); setParent("HomeButton", screen); } ``` ---
**Author:** ![damiensaxtonace](https://avatars.discourse-cdn.com/v4/letter/d/0ea827/32.png) [@damiensaxtonace](https://forum.code.org/u/damiensaxtonace)\ **Post date:** [October 31, 2023, 12:12am UTC](https://forum.code.org/t/app-lab-how-to-create-a-home-button-across-multiple-screens/23357/15 "2023-10-31T00:12:45Z")
but would it change or be created on that screen when you switch to it?