Как исправить ошибку с display none?

Question

[smarisov666]

Имею вот такой HTML код:

<div class="col-md-10 text-right menu-1" style="line-height: 53px;">
    <ul>
        <li class="active"><a href="/about-us.html" onclick="closemenu()">About Us</a></li>
        <li><a class="aldi-topmenu" href="#characters" onclick="closemenu()">Characters</a></li>
        <li><a class="aldi-topmenu" href="#roadmap" onclick="closemenu()">Roadmap</a></li>
        <li><a class="aldi-topmenu" href="#misterium-footer" onclick="closemenu()">Follow us</a></li>
        <li><a class="aldi-topmenu" href="https://drive.google.com/file/d/1LSolEXtnpwkWGDts2iEuMtibpIfy4BO0/view?usp=share_link" onclick="closemenu()" target="_blank">Whitepaper</a></li>
        <li class="dropdown">
            <a class="aldi-topmenu" style="cursor: pointer;" id='connect_wallet'>Connect wallet</a>
            <div>
                <a class="aldi-topmenu" id="metamask" onclick="connectMetamask()" style="display: none">Metamask</a>
                <a class="aldi-topmenu" id="phantom" onclick="connectPhantom()" style="display: none">Phantom</a>
            </div>
        </li>
    </ul>
</div>

И такой JS скрипт:

document.getElementById('connect_wallet').addEventListener('click', event => {
    const metamask = document.getElementById("metamask");
    const phantom = document.getElementById("phantom");

    if (metamask.style.display === "none" && phantom.style.display === "none") {
        metamask.style.display = "";
        phantom.style.display = "";
    } else {
        metamask.style.display = "none";
        phantom.style.display = "none";
    }
});

Почему это не работает? Работает пару раз пока страница грузится, когда страница загружена - всё, работать перестает.

Answer 1

[Айнур Бирдин]

Для решения этой проблемы можно изменить условие на

"metamask.style.display === '' && phantom.style.display === ''",

Примерно так

document.getElementById('connect_wallet').addEventListener('click', event => {
  const metamask = document.getElementById("metamask");
  const phantom = document.getElementById("phantom");

  if (metamask.style.display === "" && phantom.style.display === "") {
    metamask.style.display = "none";
    phantom.style.display = "none";
  } else {
    metamask.style.display = "";
    phantom.style.display = "";
  }
});

document.addEventListener('click', event => {
  const menu = document.querySelector('.menu-1');
  const isClickInsideMenu = menu.contains(event.target);

  if (!isClickInsideMenu) {
    const metamask = document.getElementById("metamask");
    const phantom = document.getElementById("phantom");

    metamask.style.display = "none";
    phantom.style.display = "none";
  }
});

Answer 2

[Khamzabek]

Для того чтобы скрипт работал корректно, необходимо убедиться, что он вызывается после того, как все элементы страницы загрузились и были полностью инициализированы.

Для этого можно использовать событие "DOMContentLoaded", которое срабатывает, когда загружены все элементы страницы. Например, так:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('connect_wallet').addEventListener('click', event => {
        const metamask = document.getElementById("metamask");
        const phantom = document.getElementById("phantom");

        if (metamask.style.display === "none" && phantom.style.display === "none") {
          metamask.style.display = "";
          phantom.style.display = "";
        } else {
          metamask.style.display = "none";
          phantom.style.display = "none";
        }
      });
});

Также убедитесь, что элементы с id "metamask" и "phantom" действительно существуют на странице. Если эти элементы генерируются динамически, то нужно дождаться их появления на странице и только после этого привязываться к ним.