#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    35
    Rep Power
    1

    addEventListener


    i've mentioned before that i have not programmed for many years. i just started studying again last year in December. to my surprise, the whole world is against inline javascript which i find odd. i've never had problems with inline js. i always use a return: onclick="return myfunction();"

    anyway, i read about event listeners which are really reinventing the wheel because onclick="" already employs an event listener. very strange stuff but just to move along with society, i've decided to try to implement this new practice but i hate jquery. i just want js/ecmascript. i can't seem to get a single event to work. i guess that i don't really understand this concept.

    i wish to have a click event which launches a function with arguments/params. like so:

    function mycssOverlay(number) {
    //commands to handle the overlay
    return;
    }

    inline js works perfectly: onclick="return mycssOverlay(parseInt(1, 10));"

    then i try eventlistener in an external script:
    document.getElementById("overlaymenu").addEventListener("click", mycssOverlay(parseInt(1, 10)));

    but nothing happens. i think that i cannot pass args to a function in an eventlistener?
    i'm hoping someone can help me figure this out or i'll just stick with inline js and a csp.

    Thanks.
  2. #2
  3. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,885
    Rep Power
    9646
    Inline event handlers are discouraged for one simple reason: you can't have more than one. If you want an onclick for something and make it inline, you can't add another. addEventListener lets you do that.

    That said, in trivial situations it's not so bad. Very trivial. And if the alternative (a full <script>) is substantially more work. Since you need a <script> for the mycssOverlay function you shouldn't use onclick.

    Originally Posted by phpjs81
    inline js works perfectly: onclick="return mycssOverlay(parseInt(1, 10));"
    onclick runs code when the event happens. It does not happen as soon as the element is rendered or loaded.

    Originally Posted by phpjs81
    document.getElementById("overlaymenu").addEventListener("click", mycssOverlay(parseInt(1, 10)));
    You are running mycssOverlay immediately. It happens as soon as the script is executed.

    The two aren't the same.

    addEventListener needs to be passed function to execute when the event happens. It could look like
    javascript Code:
    document.getElementById("overlaymenu").addEventListener("click", mycssOverlay);

    because mycssOverlay is a function, but this doesn't pass the parseInt value that it needs.

    The solution is to use an anonymous function.
    javascript Code:
    document.getElementById("overlaymenu").addEventListener("click", function() {
    	mycssOverlay(parseInt(1, 10));
    });


    But parseInt(1,10) is a silly thing to do because the value is just 1, so
    javascript Code:
    document.getElementById("overlaymenu").addEventListener("click", function() {
    	mycssOverlay(1);
    });
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    35
    Rep Power
    1
    i have done this but the click is not registered. nothing happens. all is good. you don't need to code for me. i'll stick with inline js. maybe it has to do with external js. i see examples that work but when i try the examples they don't work. i will move on. i have a migraine today and battling a click event is too much for me today.

    Thank you for your help. I hope that you have a good day.
  6. #4
  7. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,885
    Rep Power
    9646
    Yeah, I'm not going to bother with your threads anymore. This isn't the first time you've given up with minimal effort and trying to help you has proven again to be a waste of time.

    So good luck with whatever you do next. Maybe you'll learn something before you give up at it.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    35
    Rep Power
    1
    for one thing, my migraine is overbearing today. i cannot think. but this isn't a help john learn how to program forum. your time is valuable and i cannot ask you or anyone else to spend valuable time trying to help an idiot understand programming. i swear to you, i have tried this 12 times now and it doesn't work. something is wrong.

    i am trying to switch careers. i have no time to waste and no money to afford me time to waste. i'm trying to get my website finished. i am in great debt allready buying camera equipment. i cannot afford to hire a programmer and i have no time to be a good student. i'm desperate to finish this product. all i do is work 16 hours per day. i photograph, i dissect and identify insects by myself, i edit the photos, i build the website, i have a Wife and a son that i have to spend time with too. i'm overwhelmed. this click event is too simple to be so complex. i just cannot get a single event to work. at this point, i just think that it is time to move on. i want to finish my site. i can try it again on another day when my head is not hurting so much.

    i even failed to get a mouseover to work. i used the exact code that works at w3schools but even that didn't work. i am lost with this one. i'm starting to break down.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2018
    Posts
    35
    Rep Power
    1
    so my Wife just mentioned that she thinks the problem is xampp because i also had trouble with sessions. i made an html file with this code that you mention and opened it from the desktop not the server. the code works. it isn't working on the server.
    i guess that i need to read about xampp and known issues.

IMN logo majestic logo threadwatch logo seochat tools logo