Home/ Questions/Q 9201127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:55:51+00:00

I am trying to layout a web app. Each screen of my web app

  • 0

I am trying to layout a web app. Each screen of my web app is a panel. I have the following panels right now: home, about, settings, game, and results. I only want to display one panel at a time. Right now only the home panel should show but my code is not working (all panels are showing right now). What am I missing?

jsFiddle: http://jsfiddle.net/bNzVA/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
</style>
<script>
window.onload = myOnloadFunc;

function myOnloadFunc() {
    var homePanel = document.getElementById("homePanel");
    var aboutPanel = document.getElementById("aboutPanel");
    var settingsPanel = document.getElementById("settingsPanel");
    var gamePanel = document.getElementById("gamePanel");
    var resultsPanel = document.getElementById("resultsPanel");

    // All panels in app
    var panels = ["homePanel", "aboutPanel", "settingsPanel", "gamePanel", "resultsPanel"];

    // Show selected panel and hide all other panels
    function showPanel(panel) {
        for (var i = 0; i < panels.length; i++) {
            if (panel) {
                // Show panel
                this.style.display = "block";
            } else {
                // Hide
                this.style.display = "none";
            }
        }
    }

    showPanel("homePanel");
}
</script>
</head>

<body>
<!-- homePanel -->
<div class="panel" id="homePanel">
Home panel
</div>

<!-- aboutPanel -->
<div class="panel" id="aboutPanel">
About panel
</div>
</body>

<!-- settingsPanel -->
<div class="panel" id="settingsPanel">
Settings panel
</div>

<!-- gamePanel -->
<div class="panel" id="gamePanel">
Game panel
</div>

<!-- resultsPanel -->
<div class="panel" id="resultsPanel">
Results panel
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You had a couple of issues in the code.

    1. this keyword. The way you used it referred to the global object, i.e. Window.
    2. iterated over panels but not assign it to anything.
    3. store nodes in panels
    4. compare panels nodes to the node you pass into showPanel

    I updated your fiddle: http://jsfiddle.net/bNzVA/2/

    // All panels in app
var panels = [homePanel, aboutPanel, settingsPanel, gamePanel, resultsPanel];

// Show selected panel and hide all other panels
function showPanel(panel) {
    for (var i = 0; i < panels.length; i++) {
        var p = panels[i]
        if (p === panel) {
            // Show panel
            // this referred to global object, i.e. window
            p.style.display = "block";
        } else {
            // Hide
            p.style.display = "none";
        }
    }
}

showPanel(homePanel);
    • 0