Только одна из двух простых функций JS, выполняющих onclick - PullRequest
Новая
       1

Только одна из двух простых функций JS, выполняющих onclick

0 голосов
/ 05 ноября 2019

В настоящее время пишу JavaScript для простой веб-страницы, содержащей 3 типа рецептов: закуски, основные блюда и десерты. При нажатии на кнопку «Закуски» все основные блюда и десерты должны быть скрыты

Я «пометил» определенные элементы на странице, дав им название класса, и написал следующий код: 

<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

Ответы [ 3 ]

0 голосов
/ 05 ноября 2019

Причина, по которой ваша вторая функция не вызывается, заключается в том, что первая выдает исключение. Когда выдается исключение, нормальный поток управления прерывается, поэтому функция startersOnly не будет завершена. Вам нужно будет исправить ошибку в двух других ваших функциях, которая вызывает это исключение.

Я подозреваю, что ошибка вызвана тем, что document.querySelectorAll возвращает NodeList, который вы можете перебрать, используя

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

Итерация по последовательности с использованием for(x in sequence) не будет работать;этот вид цикла перебирает объект, а не последовательность. Обратите внимание на разницу между of и in.

0 голосов
/ 05 ноября 2019

Вместо 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>
0 голосов
/ 05 ноября 2019

hideMainCourse функции выдает ошибку, и поэтому вторая функция 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);
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...