Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
<script>
​
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 (panels[i] === panel) {
                // Show panel
                // this referred to global object, i.e. window
                panels[i].style.display = "block";
            } else {
                // Hide
                panels[i].style.display = "none";
            }
        }
    }
    
    showPanel(homePanel);
    
    // CODE THAT IS GIVING ME A PROBLEM /////////////////////////
    var aboutButton = document.getElementById("aboutButton");
    
    aboutButton.onclick = showPanel(aboutPanel);
    // CODE THAT IS GIVING ME A PROBLEM /////////////////////////
}
​
window.onload = myOnloadFunc;
</script>
​
</head>
​
<body>
<!-- homePanel -->
<div class="panel" id="homePanel">
<div align="center">
<p><strong>Web App</strong></p>
<p><a id="playButton">Play</a> &nbsp;&nbsp;&nbsp; <a id="aboutButton">About</a></p>
</div>
</div>
​
<!-- aboutPanel -->
<div class="panel" id="aboutPanel">
About panel
</div>
​
<!-- 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>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers