Hide/show element help

Unit 4 project

What I expect to happen: Student is trying to show certain images with conditionals
What actually happens: only one of the images will show
What I’ve tried: Student tried this code:
var uname;
var mood;
onEvent(“startButton”, “click”, function (){
uname = "name: " + getText(“nameInput”);
setText(“helloName”, uname);
mood = "mood: " + getText(“moodDropdown”);
setText(“helloMood”, mood);
playSound(“sound://category_achievements/bubbly_game_achievement_sound.mp3”, false);
updateScreen();
});
function updateScreen(){
if (mood == “happy”) {
showElement(“happyImage”);
} else if (mood == “sad”) {
showElement(“sadImage”);
} else if (mood == “overwhelmed”) {
showElement(“overwhelmedImage”);
} else {
showElement(“moodImage”);
}
}

Only the sadImage is showing. Does she need to add a hideElement as well?

Thanks in advance for your help!

Hello @erogers,

Would you please post a share link to the student’s work so that we can have a better idea of whats going on? With only the code, its hard to pinpoint whether the issue is here, in the element IDs, or perhaps in how the user is interacting with the program.

Based on the code segment however, I would actually only expect the ‘moodImage’ to ever show up. This is because when the value of the mood variable is set in the event, it is set to 'mood: ’ + some text. In the updateScreen function, the student is checking the value against the feeling, but not the full string.

There are two other things that I think are likely bugs, but can’t be sure without the full program:

  1. If each of the images are not initially set to hidden, then they could all be ‘shown’ but the sadImage is on top, and therefore is the only one that is visible.
  2. If your student would like this program to work more than once, they will need to add additional hideElement calls to get rid of the images that were previously shown.

Good luck!

1 Like

Thanks for your reply.
Here’s a link: [https://studio.code.org/projects/applab/KukheOEbyhfMFUcTLi0NIh_mAqBXd2td77-PF9gbY4Q]

So she needs to set the mood variable to happy, sad, overwhelmed in the event, and then add hide element calls to get rid of images shown. We’ll try that. Thanks!

That’s one possible option, yes. This means she’s going to have to do her setText a little differently for the mood text, but it shouldn’t be too bad!

When I run this code, I only ever get the ‘moodImage’, not the ‘sadImage’. This confirms my original guess - the code is defaulting to the last else statement in updateScreen because none of the strings for mood match.

Could you show me how to do the setText for mood?

Never mind, I figured it out. Thank you so much!