NWJS JS 脚本无法正常运行

Question

我正在使用 JS 使 divs 显示为块或 none onclick 某些输入。当我只让它为一个输入工作时，脚本可以找到，但是一旦我为第二个输入输入代码，它就会出现故障，两个按钮都会打开 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>

Answer 1

首先，标记看起来有点乱。您不需要为所有内容添加 ID、名称和 class。仅在需要时才添加这些内容。

name 很少使用，它是连接到 HTML 元素的一种方式。就像连接的无线电拨号一样。在这段代码中你可能根本不需要这个。
class 仅当您需要添加特定的 CSS class 名称来调整样式时才应使用此选项。如果您不这样做，请不要包含它。
id 应该分配给一个在页面上只出现一次的唯一值。如果 url 包含 #whatever 并且匹配具有 id="whatever" 的元素，它可用于自动滚动到页面的该位置。尽管它更常用于定位 JavaScript 中的特定元素。如果您没有做这两件事，请不要添加它。

您遇到的另一个问题是执行顺序。您可以先定义您的 JS（<script> 在顶部），然后在 HTML 中使用 onclick 引用函数，或者（更常见）先定义您的 HTML带有 ID，然后让您的 <script> 在底部定位 ID (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

NWJS JS 脚本无法正常运行

NWJS JS script not functioning right

javascript

nwjs