Question

我正在尝试调试一些JS代码，问题是window.onload函数的调用方式比我预期的要多。这是我的JS代码：

var trueCountApp = (function(){

    window.onload = function(){openRulesOverlay()};
    document.getElementById("open-rules-overlay-button").onclick = function(){openRulesOverlay()};
    document.getElementById("select-rules-button").onclick = function(){saveRuleSelections()};

    function openRulesOverlay(){
            let blackjackRules;
            if(sessionStorage.blackjackRules){
                blackjackRules = JSON.parse(sessionStorage.blackjackRules);
                for(let i=0; i<blackjackRules.length;i++){
                    document.getElementsByClassName("rule")[i].value = blackjackRules[i];
                }
            }
            document.getElementById("rules_overlay").style.display = "block";
        }

    function saveRuleSelections(){
            let blackjackRules = [];
            let rules = document.getElementsByClassName("rule");
            for(let i=0; i<rules.length;i++){
                blackjackRules.push(rules[i].value);
            }
            let jsonBlackjackRules = JSON.stringify(blackjackRules);
            sessionStorage.setItem("blackjackRules", jsonBlackjackRules);
            document.getElementById("rules_overlay").style.display = "none";
        }
})();

我的页面上有2个按钮：一个打开叠加层，另一个关闭叠加层。我还想在首次加载页面时一次运行一些代码，我只使用了我已编写的openRulesOverlay()函数作为我想运行的代码的占位符。我期望发生的是加载页面，openRulesOverlay()将运行一次，然后按钮将从那里正常工作。但是，似乎window.onload函数在叠加层关闭时运行。为什么会这样？

注意：我没有包含html代码，因为我认为它与此问题无关。如果我需要包含它，请告诉我。

Answer 1

在我的特定情况下的简单修复：默认按钮类型为“提交”，因此页面将被加载，表单将被打开，然后当我按下按钮以关闭表单时，它实际上是在重新加载页面并打开再次填写表格。只需将按钮类型更改为“按钮”即可。

window.onload函数在页面加载时调用，并且每次关闭叠加时也会调用

1 个答案: