dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Function reacts not on first click after pageload

  1. #1
    Join Date
    Apr 2017
    Posts
    14

    Question Function reacts not on first click after pageload

    Hello!

    I am working on a website and have a little issue with my menu.

    The menu has a dropdown section, which I open and close with a JS function when clicked on. This works with one small issue.
    It does not work on the first click on it. After the first click everything is fine. After every pageload it again does nothing on the first click.

    Here is a link to the startpage of the (unfinished! - the links don't work yet) website:
    http://shidigital.com/palmenwebseite/palmengarten.html
    The issue is with the menu on the left, where the down "arrows" are.

    This is the html-code of the menu involved:
    HTML Code:
        <nav>
          <ul class="navigation">
            <li><a href="#" class="active">Startseite</a></li>
            <li>
              <a href="palmenseiten/m1palmenarten.html" onclick="menu('palmenarten')">Palmenarten <div class="dreieck">V</div></a>
            </li>
            <ul id="palmenarten" class="untermenu">
              <li><a href="palmenseiten/kokosnusspalme.html">Kokosnusspalme</a></li>
              <li><a href="#">Fächerpalme</a></li>
              ...
    And this is the Javascript-Code:
    Code:
    function menu(sub) {  
        var status = document.getElementById(sub).style.display;
        if (status == "none") {
            document.getElementById(sub).style.display = "block";
        } else {
            document.getElementById(sub).style.display = "none";
        }
    };
    I tried it with putting the status variable outside of the function or giving it an initial value, but this does not solve the problem.

    Hope someone can explain me why this does not work and how to solve this issue.

    Thank you very much for reading and helping out.
    Shi

  2. #2
    Join Date
    Aug 2016
    Posts
    113
    if (status == "none" || !status)

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,429
    The script isn't available because you placed it at the end of the document, put scripts in the <head> of the document unless you have a need to place anywhere else.

    Also "Cookies" and you should take note that people have tools to expire cookies on setting... using localStorage would be a better option. simply stringify a variable you want to use to record the data you want stored and save to local storage, test for and load those prefs / data on page load.

    Cookies only store up to 4k where as the localStorage can store 5MB of information that only you can access. You then use cookies as the fallback position for older browsers.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Apr 2017
    Posts
    14
    Thank you very much shakazorba!!!
    This solved the issue.

    I have read that it is better to put the Javascript into the body so the page loads first and at the end Javascript. Maybe in this case it is better to put it in the head. I did this but it did not do a change.

    I still don't even know if I use cookies, but I want to use Google-Analytics later and I think they use them, but not sure. I just wrote it already in the footer, then it's there and I can't forget it when I add Google-Analytics.
    If you know another good Analytics tool I would prefer to use that one over Google.

  5. #5
    Join Date
    Dec 2012
    Posts
    1,555
    I have read that it is better to put the Javascript into the body so the page loads first and at the end Javascript.
    That's correct, act accordingly.

    If you know another good Analytics tool I would prefer to use that one over Google.
    An alternative and widely used analytics tool is Piwik. I prefer it due to privacy aspects.

  6. #6
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,615
    Google-Analytics is blocked by a lot of ad-blockers.

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,429
    Quote Originally Posted by Shi View Post
    Thank you very much shakazorba!!!
    This solved the issue.

    I have read that it is better to put the Javascript into the body so the page loads first and at the end Javascript. Maybe in this case it is better to put it in the head. I did this but it did not do a change.

    I still don't even know if I use cookies, but I want to use Google-Analytics later and I think they use them, but not sure. I just wrote it already in the footer, then it's there and I can't forget it when I add Google-Analytics.
    If you know another good Analytics tool I would prefer to use that one over Google.
    No, not always true...

    Some systems put scripts at the end when they can easily go where they have always gone but use the attribute defer to defer loading until the page has loaded.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  8. #8
    Join Date
    Apr 2017
    Posts
    14
    Quote Originally Posted by Sempervivum View Post
    An alternative and widely used analytics tool is Piwik. I prefer it due to privacy aspects.
    That is exactly what I need. I prefer open-source where I can. Thank you!
    I have Google Analytics on my blog, but I will switch. It is no use anymore anyway, since I get a lot of spam-stuff there, so the data becomes mostly unuseable. I know you can set up filters etc. but I did not really do this yet.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center