如何为正在制作的应用添加类别屏幕？

Question

I'm trying to add a category screen to an app I'm making for a class, and I'm stumped. I don't know what to add. I've tried researching the problem, but I couldn't find anything that could help.

What I've got for the code is this:

The HTML part of the code:

<div class='screen' id='category-screen'>
    <h4 id='category'>Comics</h4>
    <h4 id='category'>Movies</h4>
    <h4 id='category'>Games</h4>
    <h4 id='category'>Misc.</h4>
</div>

The JavaScript part of the code:

function displayCategory() {
  $(".screen").hide();
  $("#category-screen").show();
}

There's obviously more to the code, I'm just showing the part of the code that relates to the Category Screen. If you need more, let me know.

For the app I'm making for class, I expect the next screen to be a category screen with 4 categories after the start button is hit, but it's not. It just goes to the questions.

Answer 1

What your javascript is doing right now is hiding the .screen class with all elements that belong to it. This includes the 'categorie' divs.

Trying to make them visible after the hide won't have any effect since their parent node (.screen) is still hidden. As far as I can tell replacing the $(".screen").hide(); with $(".screen").show(); should yield your wanted result, showing the category section.

function displayCategory() {
  $(".screen").show();
}

function hideCategory() {
  $(".screen").hide();
}