Javascript OnClick функция запускается со второго раза, когда я нажимаю, но не первый

Question

У меня есть два изображения, которые запускают одну и ту же функцию.Функция выполняет показ / скрытие одного из изображений, а затем я добавил дополнительный код, чтобы показать / скрыть меню, которое я не включил.

function menu() {
  var b = document.getElementById("burger");
  var c = document.getElementById("close");
  if (b.style.display === "block") {            
      b.style.display = "none";
      c.style.display = "block";
  } else {
      b.style.display = "block";
      c.style.display = "none";
  }
}

<img src="img/burger-white.png" id="burger" onclick="menu()" alt="img1">
<img src="img/close-white.png" id="close" onclick="menu()" alt="img2">

Все работает как задумано, за исключением первого раза, когда я нажимаю на изображение, когда оно ничего не делает.

Answer 1

Похоже, что дисплей для бургера изначально не настроен на блокировку.Попробуйте загрузить страницу и проверить ее с помощью Chrome.Там вы должны увидеть, когда страница загружена, если она изначально имеет ожидаемый стиль CSS.

Обходной путь - добавить функцию, которая установит отображение элемента с идентификатором #burger в «блок».", если размер окна меньше 1100 пикселей.

function setDisplay() {
    var width = window.innerWidth;
    var b = document.getElementById("burger");
    if(width <= 1100) {
        b.style.display = "block";
    }
}