兩個簡單 JS function 中只有一個執行 onclick

Question

目前正在為一個包含 3 種食譜類型的簡單網頁編寫 JavaScript：開胃菜、主菜和甜點。 單擊開始按鈕后，所有主菜和甜點都將被隱藏

我通過給它們一個 class 名稱來“標記”頁面上的某些元素，並編寫了以下代碼：

<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函數引發錯誤，這就是為什么第二個 function hideDesserts沒有運行的原因。

這是用於解決您的錯誤的更新代碼。

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

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

Answer 2

你的第二個 function 沒有被調用的原因是因為第一個拋出了異常。 當拋出異常時，會中斷正常的控制流程，因此startersOnly function 將無法完成。 您將需要修復導致此異常的其他兩個函數中的錯誤。

我懷疑這個錯誤是因為document.querySelectorAll返回一個 NodeList，你可以使用它來迭代

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

使用for(x in sequence)序列進行迭代將不起作用； 這種循環遍歷 object，而不是序列。 注意of和in之間的區別。

Answer 3

代替for (y in maincourse)使用forEach循環，就像這里一樣。 for in循環在所有導致代碼中斷的迭代之后返回一個項目。

 <:DOCTYPE html> <head> <meta charset="utf-8"> <script src="https.//d3js.org/d3.v4.min:js"></script> <style> body { margin;0:position;fixed:top;0:right;0:bottom;0:left;0. } </style> </head> <body> <li><a href="#" onclick="startersOnly()" >starter</a></li> <div class="dessert">Dessert</div> <div class="main_course">Main Course</div> <script> function hideDesserts(){ var desserts = document.querySelectorAll(';dessert'). console.log(desserts) desserts.forEach((d) => { d.style;display = "none"; }). } function hideMainCourse() { var maincourse = document.querySelectorAll(';main_course'). console;log(maincourse). maincourse.forEach((m) => { m.style;display="none"; }); } function startersOnly() { hideMainCourse(); hideDesserts(); } </script> </body>

兩個簡單 JS function 中只有一個執行 onclick

問題描述

3 個解決方案

解決方案1
0 2019-11-05 15:07:25

解決方案2
0 已采納 2019-11-05 15:08:26

解決方案3
0 2019-11-05 15:10:28

兩個簡單 JS function 中只有一個執行 onclick

問題描述

3 個解決方案

解決方案1 0 2019-11-05 15:07:25

解決方案2 0 已采納 2019-11-05 15:08:26

解決方案3 0 2019-11-05 15:10:28

解決方案1
0 2019-11-05 15:07:25

解決方案2
0 已采納 2019-11-05 15:08:26

解決方案3
0 2019-11-05 15:10:28