JS-скрипт NWJS работает неправильно

Я использую JS, чтобы div отображались как блоки или не отображались при нажатии определенных входов. Когда он работает только для одного входа, скрипты работают, но как только я внедряю код для второго входа, он дает сбой, и обе кнопки открывают 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>

javascript nwjs
person ArmoredSG    schedule 19.06.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

  • имя используется редко, это способ подключения к элементам HTML. Как подключенные радио-циферблаты. Вам, вероятно, это вообще не нужно в этом коде.
  • class, его следует использовать только в том случае, если вам нужно добавить определенное имя класса CSS для настройки стилей. Если вы этого не делаете, не включайте это.
  • id должно быть присвоено уникальное значение, которое встречается на странице только один раз. его можно использовать для автоматической прокрутки к этой позиции страницы, если 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, вы можете задать их здесь.

person Jaredcheeda    schedule 19.06.2021
comment
это можно легко сделать с помощью css. Я просто пытался улучшить свой js и использовать его больше, когда появляются простые возможности. - person ArmoredSG; 20.06.2021
comment
Я постараюсь быть лучше с моими вопросами и форматами. Эта платформа действительно эффективна. Я получаю помощь и ответы как можно скорее. Определенно буду инвестировать в переполнение стека. - person ArmoredSG; 20.06.2021