Id parameter refers to an id ("") which is already being used outside of App Lab

Was doing a basic AppLab code along with my class yesterday. We were just making a single button that the user would click and it would change the screen’s background color. I had two students get the error " ERROR: Line: 1: Error: The onEvent() id parameter refers to an id ("") which is already being used outside of App Lab. Please use a different id." One student was using the id “submitButton” and the other was using the id “continueButton”. I’ve never experienced this in AppLab before. Any documentation I can reference?

Link to the project or level:
AppLab Demo
Intro to App Lab

What I expect to happen: To be able to name the ids in the way we want!

What actually happens: Error above

What I’ve tried: Intentionally misspelling the id and then it runs fine.

Hello @mreeves! Welcome to the forum! I took a look at the first app labeled “AppLab Demo”. I did a quick remix of it and it looks like the button is actually called “submitButto”. The student probably had a typo when creating the button and didn’t see it when they went to create the code.
The second example is a similar error. The button name is “continuButton” but is called in the code as “continueButton”. The id has to be exactly the same - case sensitive and exact spelling. Hope this is helpful.

Hi, thanks for trying to help. I know that the ids have to be exact, they’re not typos. The projects currently have “submitButto” and “continuButton” because AppLab won’t let us actually save the names spelled correctly. If we edit the element id in Design Mode to say “submitButton” or “continueButton”, the field goes red and if we hit enter or click out of the field, it changes the name to those “typos”.
Screen Shot 2021-10-06 at 2.54.46 PM

If we manually edit the id in our onEvent to the correct spelling, that is when we receive the error.
Screen Shot 2021-10-06 at 2.59.48 PM

Hmmmm… that is odd. I looked at it again and tried it myself. I got the same results. I wonder if it’s a matter of the names over lapping something that Code has running in the AppLab widgets themselves. Maybe some of our other moderators might have some ideas.

Hey @mreeves,

@edavis nailed it here - AppLab doesn’t let you use ids of other elements that get used by Code Studio in other contexts. For example, continueButton is the id of the button that appears when you finish a level

Behind the scenes, App Lab as a whole is one big website, so the advice we give students about not overlapping ids applies to everything on the page, including to the ids of buttons we provide.

As a workaround, I sometimes use “Btn” as my end-of-id name for buttons - ie: “submitBtn” or “continueBtn”. That helps get around this.

Hope that helps!

Dan - Code.org Curriculum Writer

2 Likes

Thanks, @edavis and @Dan ! I assumed something like this is what was going since it’s a web app being built in a web app. I appreciate the specific example of the submit button! I’ve never had this happen in AppLab before and our other CS teacher, who has been teaching Discoveries for the last four years, hadn’t experienced it either. It threw us for a loop when two students in the same period discovered it!

It could be helpful to have a little error message explaining this when the user is trying to use an id that’s already used elsewhere in design mode. The id field turning red let us know something wasn’t right but no hints as to what was wrong with their ids.

Thanks again!