admin管理员组

文章数量:1404924

My onclick event is firing even without a click. I'm not sure why? Below is my code. The home panel should load first and when the user clicks the aboutButton they should be taken to the about panel.

JS Bin: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<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>

My onclick event is firing even without a click. I'm not sure why? Below is my code. The home panel should load first and when the user clicks the aboutButton they should be taken to the about panel.

JS Bin: http://jsbin./alebox/1/edit 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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>
  • javascript
Share Improve this question asked Jan 29, 2013 at 20:51 user1822824user1822824 2,5087 gold badges43 silver badges68 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

It's firing because you're calling it right away!

So you want:

aboutButton.onclick = function(){showPanel(aboutPanel);};

To attach a function to the event only the reference to the function should be given. You're actually calling the function when using ().

The code to bind the event should be:

aboutButton.onclick = showPanel;

本文标签： javascriptonclick Event Firing Even without ClickStack Overflow

版权声明：本文标题：javascript - onclick Event Firing Even without Click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744297093a2599394.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。