Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post javascript event listeners

    Hi!
    How to change page content with javascript event listeners.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul
    {
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    }
    a
    {
    float:left;
    width:6em;
    text-decoration:none;
    color:white;
    background-color:purple;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    }
    a:hover {background-color:#ff3300;}
    li {display:inline;}
    </style>
    </head>
    
    <body>
    <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    </ul>
    
    <p>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    </p>
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    It would help to tell us WHAT page content you want to change and WHAT events you want to listen to.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    By clicking on menu option - without opening a new page I want to change my page content.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Like this?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul#navlist {
        float:left;
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
    }
    ul#navlist a {
        float:left;
        width:6em;
        text-decoration:none;
        color:white;
        background-color:purple;
        padding:0.2em 0.6em;
        border-right:1px solid white;
    }
    a:hover {background-color:#ff3300;}
    li {display:inline;}
    
    div#content div {
        display: none;
        width: 300px;
        border: solid 3px blue;
        background-color: lightblue;
    }
    </style>
    </head>
    
    <body>
    <ul id="navlist">
    <li><a href="#" id="_div1">Link one</a></li>
    <li><a href="#" id="_div2">Link two</a></li>
    <li><a href="#" id="_divThree">Link three</a></li>
    <li><a href="#" id="_fourthDiv">Link four</a></li>
    </ul>
    <br/><br/><br/>
    <div id="content">
       <div id="div1">This will show when Link one is clicked</div>
       <div id="div2">Second link shows this</div>
       <div id="divThree">And this 3 3 3 3 3<br/>From the third link</div>
       <div id="fourthDiv">Now is the time for<br/><br/>seeing the last div</div>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var links = document.getElementById("navlist").getElementsByTagName("a");
          for ( var i = 0; i < links.length; ++i )
          {
              links[i].onclick = changeNav;
          }
    
          function changeNav( )
          {
              var divs = document.getElementById("content").getElementsByTagName("div");
              var find = this.id.substring(1);
              for ( var d = 0; d < divs.length; ++d )
              {
                  var div = divs[d];
                  div.style.display = ( div.id == find ) ? "block" : "none";
              }
              return false;
          }
      }
    )();
    </script>
    </body>
    </html>
    Notice that the id of the <a> is same as the id of the <div> except for adding an underscore to the front.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help.
    I try to learn also javascript event listeners and I want to solve the same problem with Functions like

    addEvent()
    element.addEventListener()
    ……

    it is difficult to understand.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul#navlist {
        float:left;
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
    }
    ul#navlist a {
        float:left;
        width:6em;
        text-decoration:none;
        color:white;
        background-color:purple;
        padding:0.2em 0.6em;
        border-right:1px solid white;
    }
    a:hover {background-color:#ff3300;}
    li {display:inline;}
    
    div#content div {
        display: none;
        width: 300px;
        border: solid 3px blue;
        background-color: lightblue;
    }
    </style>
    </head>
    
    <body>
    <ul id="navlist">
    <li><a href="#" id="_div1">Link one</a></li>
    <li><a href="#" id="_div2">Link two</a></li>
    <li><a href="#" id="_divThree">Link three</a></li>
    <li><a href="#" id="_fourthDiv">Link four</a></li>
    </ul>
    <br/><br/><br/>
    <div id="content">
       <div id="div1">This will show when Link one is clicked</div>
       <div id="div2">Second link shows this</div>
       <div id="divThree">And this 3 3 3 3 3<br/>From the third link</div>
       <div id="fourthDiv">Now is the time for<br/><br/>seeing the last div</div>
    </div>
    
    <script type="text/javascript">
    
    function addevt(o,t,f,p){
     if (o.addEventListener){
      o.addEventListener(t,function(e){ return f(e,p);}, false);
     }
     else if (o.attachEvent){
      o.attachEvent('on'+t,function(e){ return f(e,p); });
     }
    }
    
          function changeNav(e,obj )
          {
              var divs = document.getElementById("content").getElementsByTagName("div");
              var find = obj.id.substring(1);
              for ( var d = 0; d < divs.length; ++d )
              {
                  var div = divs[d];
                  div.style.display = ( div.id == find ) ? "block" : "none";
              }
              return false;
          }
    
         function Init(){
          var links = document.getElementById("navlist").getElementsByTagName("a");
          for ( var i = 0; i < links.length; ++i )
          {
     //         links[i].onclick = changeNav;
              addevt(links[i],'click',changeNav,links[i]);
          }
       }
    
              addevt(window,'load',Init);
    
    
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Vic's answer is the most complete way to do it.

    I would like to note that the only reason to use addEventListener (or attachEvent) is if you need to have TWO OR MORE sets of code responding to the same event.

    If you only need one event handler, there's no reason not to use the simpler code that I showed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Old Pedant View Post
    If you only need one event handler, there's no reason not to use the simpler code that I showed.
    Provided that there's no chance that a later script will overwrite them...

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Ummm...the "later" script is the one that needs to use addEventListener.

    It's always okay for the *FIRST* code to add an event listener can simply assign it.

    I think you said it backwards. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Old Pedant View Post
    Ummm...the "later" script is the one that needs to use addEventListener.

    It's always okay for the *FIRST* code to add an event listener can simply assign it.

    I think you said it backwards. <grin/>
    Event handlers and event listeners are not treated the same. Your script runs inline and installs event handlers not listeners, and as we all know they could be lost if someone comes along and adds a similar script somewhere below it.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Yes, that's what I said. If you are not *SURE* your event handler is the first one being attached, then you must use addEventListener. But if you know it is the first one (easy to determine if you use Felgall's non-intrusive way of adding JS), then you can just assign it directly.

    Demo:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div div {
        border: solid brown 3px;
        background-color: yellow;
        width: 300px;
    }
    </style>
    </head>
    <body>
    <div>
        <form id="theForm">
        <input type="button" name="testme" value="try it" />
        </form>
        <hr/>
        <div id="one"></div>
        <hr/>
        <div id="two"></div>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var btn = document.getElementById("theForm").testme;
    
          // first event handler: direct assignment is fine!
          btn.onclick = function( ) {
              document.getElementById("one").innerHTML +=
                  "The button was clicked.<br/>";
          }
    
          // not first...so use addEventListener (IE version not shown)
          btn.addEventListener("click",demo, false );
          function demo( ) {
              document.getElementById("two").innerHTML +=
                  "Clickety-clickety!<br/>";
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by Old Pedant View Post
    Yes, that's what I said. If you are not *SURE* your event handler is the first one being attached, then you must use addEventListener. But if you know it is the first one (easy to determine if you use Felgall's non-intrusive way of adding JS), then you can just assign it directly.
    You might also want to add the first using an eventlistener rather than a handler if you are going to be detaching and reattaching it dynamically. You would not be able to guarantee that there is nothing else attached the second time you attach the same processing after having previously detached it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Sure! But those are exceptional circumstances.

    And in truth I might use addEventListener, regardless, if I was (say) including some jQuery library that was doing who-the-heck-knows what.

    But I'll bet that 95% of the time--likely more--you can get away with the direct assignment because it is *YOUR* page and you *KNOW* you aren't going to be adding or removing or changing event listeners.

    A great example is indeed the question that started this thread: In reality, how likely is it that you will be attaching any more "onclick" listeners to the <a> navigation elements? I'd be mightily surprised is the answer is more than "once in a dozen blue moons". If I want to perform further actions due to those onclicks, I'd add the actions into the existing event handlers, not create all new ones.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Old Pedant View Post
    But I'll bet that 95% of the time--likely more--you can get away with the direct assignment because it is *YOUR* page and you *KNOW* you aren't going to be adding or removing or changing event listeners.
    "I added a script I found on dynamicdive but it broke my other one"

    How often do we see that?

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    LOL! Okay, okay! Point conceded!

    Maybe I should have said "If you know what you are doing, then..."

    I don't think I have ever "lifted" a script from somewhere without at least minor rewrites to integrate it into my code. And often wholesale makeovers, because all I wanted was the idea.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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