Search code examples
javascriptnwjs

NWJS JS script not functioning right

Im using JS to make divs display as block or none onclick of certain inputs. When i only have it working for one input the scripts work find, but as soon as i impliment the code for the second input it glitches out and both buttons open up the div thats only supposed to work for the second button.

Some of my code:

<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>
Solution

  • First off the markup looks kinda messy. You don't need to add an ID, name, and class to everything. Only add those things if you need them.

    • name is rarely used, it's a way to connect to HTML elements. Like connected radio dials. You probably don't need this at all in this code.
    • class this should only be used if you need to add a specific CSS classname to adjust the styles. If you are not doing that, don't include it.
    • id should be assigned to a unique value that only occurs once on the page. it can be used to auto-scroll to that position of the page if the url contains #whatever and that matches an element with id="whatever". Though it is more commonly used just to target a specific element in your JavaScript. If you aren't doing either of those things, don't add it.

    Another problem you have is order of execution. You can either define your JS first (<script> at the top) and then reference the functions with onclick in the HTML, or (more commonly), define your HTML first with ID's, then have your <script> at the bottom targeting the IDs (document.getElementById('asdf')).

    Here is a cleaner version of your code.

    <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>

    This question isn't related to NW.js at all. It's just basic HTML and JavaScript.

    I recommend you follow these resources to improve your skills. You can also rely on the world's largest programming community (HTML/JS) to ask these questions. Then when you have NW.js specific things, you can ask those here.