Блог

Я использую JS, чтобы заставить divs отображаться как блок или нет при нажатии определенных входных данных. Когда он работает только для одного ввода, сценарии работают, но как только я ввожу код для второго ввода, он отключается, и обе кнопки открывают div, который должен работать только для второй кнопки.

Кое — что из моего кода:

 <span name="FaviconSPAN" id="FaviconSPAN" class="FaviconSPAN" OnClick="showOrHide()">
            <img src="ASSETS/IMAGES/FAVICON1.png" alt="FAVICON" name="FaviconPNG" id="FaviconPNG" class="FaviconPNG" />

        </span>

<div name="SoftMenuWrapper1" id="SoftMenuWrapper1" class="SoftMenuWrapper1">
                <input type="button" value="Favorites" name="SoftMenuInput1" id="SoftMenuInput1" class="SoftMenuInput1" ONCLICK="ShowAndHide()" />
                <div name="SoftMenuContent1" id="SoftMenuContent1" class="SoftMenuContent1">
                    <a href="#" name="SoftMenuLink1-1" id="SoftMenuLink1-1" class="SoftMenuLink1-1"> Link 1 </a>
                    <a href="#" name="SoftMenuLink1-2" id="SoftMenuLink1-2" class="SoftMenuLink1-2"> Link 1 </a>
                    <a href="#" name="SoftMenuLink1-3" id="SoftMenuLink1-3" class="SoftMenuLink1-3"> Link 1 </a>
                </div>
            </div>

<script type="text/javascript">
        var faqPage = document.getElementById('SoftMenuContent1');

        function showDiv() {
            faqPage.style.display = "block";
        }

        function closeDiv() {
            faqPage.style.display = "none";
        }

        function showOrHide() {
            if (faqPage.style.display === "block") {
            closeDiv()
        } 
        
        else {
            showDiv()
        }

        }
    </script>

    <SCRIPT>
function ShowAndHide() {
    var x = document.getElementById('SectionName');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</SCRIPT>
 

Во-первых, разметка выглядит довольно грязно. Вам не нужно добавлять идентификатор, имя и класс ко всему. Добавляйте эти вещи только в том случае, если они вам нужны.

• имя используется редко, это способ подключения к HTML-элементам. Как подключенные радиоприемники. Вероятно, вам это вообще не нужно в этом коде.
• класс это следует использовать только в том случае, если вам нужно добавить определенное имя класса CSS для настройки стилей. Если вы этого не делаете, не включайте это.
• идентификатору должно быть присвоено уникальное значение, которое встречается на странице только один раз. его можно использовать для автоматической прокрутки до этой позиции страницы, если URL-адрес содержит #whatever и соответствует элементу id="whatever" . Хотя он чаще используется только для таргетинга на определенный элемент в вашем JavaScript. Если вы не делаете ни того, ни другого, не добавляйте его.

Еще одна проблема, с которой вы столкнулись, — это порядок выполнения. Вы можете либо сначала определить свой JS ( <script> вверху), а затем ссылаться на функции onclick в HTML, либо (чаще всего) сначала определить свой HTML с помощью идентификаторов, а затем настроить свой <script> внизу, ориентируясь на идентификаторы ( document.getElementById('asdf') ).

Вот более чистая версия вашего кода.

 <span id="faviconContainer">
  <img src="assets/images/favicon1.png" alt="Image of an icon" />
</span>

<div>
  <input type="button" value="Favorites" id="softMenuInput" />
  <div id="faqPage">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<script type="text/javascript">
  /**
   * Takes in an ID to find an element on the page, then shows/hides it.
   *
   * @param  {string}  id  The element's ID
   */
  function toggle (id) {
    var el = document.getElementById(id);
    if (el.style.display === 'block') {
      el.style.display = 'none';
    } else {
      el.style.display = 'block';
    }
  }

  var faviconContainer = document.getElementById('faviconContainer');
  var softMenuInput = document.getElementById('softMenuInput');

  faviconContainer.addEventListener('click', function () {
    toggle('faqPage');
  });
  softMenuInput.addEventListener('click', function () {
    toggle('sectionName');
  });
</script>
 

Этот вопрос не связан с NW.js вообще. Это просто базовый HTML и JavaScript.

Я рекомендую вам следовать этим ресурсам, чтобы улучшить свои навыки. Вы также можете положиться на крупнейшее в мире сообщество программистов (HTML/JS), чтобы задать эти вопросы. Затем, когда у вас будет NW.js конкретные вещи вы можете задать здесь.

• https://marksheet.io — HTML/CSS/Sass
• https://freeCodeCamp.org — JavaScript