仅执行onclick的两个简单JS函数中的一个

Question

当前正在为包含3种食谱类型的简单网页编写JavaScript：入门，主菜和甜点。单击“开始菜单”按钮后，所有主菜和甜点都将被隐藏

我通过给它们一个类名来标记页面上的某些元素，并编写了以下代码：

<li><a href="#" onclick="startersOnly()" >starter</a></li>

<script> 
function hideDesserts(){
    var desserts = document.querySelectorAll('.dessert');
    for (x in desserts) {
    desserts[x].style.display='none';
    }   
}
function hideMainCourse() {
    var maincourse = document.querySelectorAll('.main_course');
    for (y in maincourse) {
    maincourse[y].style.display='none';
    }
}
function startersOnly() {
    hideMainCourse();
    hideDesserts();
                }
</script>

仅hideMainCourse（）正在执行。当我颠倒顺序时，只会执行hideDesserts（）。

错误信息：

Uncaught TypeError: Cannot set property 'display' of undefined
    at hideMainCourse (portfolio.html:99)
    at startersOnly (portfolio.html:103)
    at HTMLAnchorElement.onclick (VM401 portfolio.html:84)
hideMainCourse @ portfolio.html:99
startersOnly @ portfolio.html:103
onclick @ VM401 portfolio.html:84

Answer 1

[hideMainCourse函数会引发错误，这就是第二个函数hideDesserts未运行的原因。

这里是更新的代码，可以解决您的错误。

function hideDesserts(){
    try {
        var desserts = document.querySelectorAll('.dessert');
        desserts.forEach(function(x) {
            x.style.display='none';
        });
    } catch(e) {
        console.log(e);
    } 
}

function hideMainCourse() {
    try {
        var maincourse = document.querySelectorAll('.main_course');
        maincourse.forEach(function(y) {
            y.style.display='none';
        });
    } catch(e) {
        console.log(e);
    }
}

Answer 2

之所以没有调用第二个函数，是因为第一个函数抛出异常。引发异常时，正常的控制流程将中断，因此startersOnly功能将无法完成。您将需要修复导致此异常的其他两个功能中的错误。

我怀疑该错误是由于document.querySelectorAll返回了一个NodeList，您可以使用它进行迭代而引起的，因此

for(var x of desserts) {
    x.style.display = 'none';
}

使用for(x in sequence)遍历序列将不起作用；这种循环遍历对象而不是序列。注意of和in之间的区别。