www.webdeveloper.com
Results 1 to 4 of 4

Thread: onClick event not working in anchor tag

  1. #1
    Join Date
    Oct 2011
    Posts
    13

    onClick event not working in anchor tag

    Code:
    <script type="text/javascript">
    function serviceChange(service) {
    	alert('as');
    if (service == "taxi") {
    document.getElementById('service-list').innerHTML = "<li><strong>Airport Transportation</strong></li>\
    <li><strong>Sightseeing</strong></li>\
    <li><strong>Shopping</strong></li>\
    <li><strong>Sporting Events</strong></li>\
    <li><strong>Conventions</strong></li>\
    \
    <h3>We Offer</h3>\
    <li><strong>State-of-the-Art, Computer-Dispatch System</strong></li>\
    <li><strong>24-Hour Service‹Supervisors Always on Duty</strong></li>\
    <li><strong>Trained, Courteous, & Professional Drivers</strong></li>\
    <li><strong>Safe, Clean, Air-Conditioned Vehicles</strong></li>\
    <li><strong>Corporate Accounts Welcome</strong></li>";
    }
    
    else {
    document.getElementById('service-list').innerHTML = "<li><strong>Airport Service:</strong> <span>Pick Up and Drop Off</span></li>\
                    <li><strong>Sightseeing and Shopping Tour:</strong><span>Enjoy spectacular sights of South Florida and The keys.</span></li>\
                    <li><strong>wedding:</strong><span>Make your wedding a pleasurable experience with our luxury limo.</span></li>\
                    <li><strong>Bachelor or Bachelorette Party:</strong><span>It may be the last time, so do it elegantly with all the fun a limo ride can provide.</span></li>\
                    <li><strong>Prom and Graduation:</strong> <span> One and only unique moment that is required an indelible memory, using our limo services is best way to celebrate it with all of friends and family.</span></li>\
                    <li><strong>Dining Extravaganza with a Night on Town:</strong> <span>Eat and drink all you want in the finest restaurants and club in South Florida.</span></li>\
                    <li><strong>Impress someone in a stretched limousine for up to 4 hours:</strong> <span>This unbelievable trip can win someone heart for a long time.</span></li>\
                    <li><strong>Limo Bar Hopping:</strong> <span> Visit all the bars and night clubs in one night to have the ultimate fun.</span></li>\
                    <li><strong>Birthday:</strong> <span>Take your birthday on the road with a luxury limo to maximize the fun.</span></li>\
                    <li><strong>Reward your business partner or your staff:</strong> <span>This luxury limo ride and treat may increase productivity and profit.</span></li>\
                    <li><strong>Renew your Anniversary:  </strong> <span>A luxury limo ride can add a more fun to your celebration.</span></li>";
    }
    }
    </script>
    Code:
      <div id="mid">
        <h1>Limousine and Taxi cab services that we offer</h1>
        	<div id="limo-list">
             <h2><a href="#" onclick="serviceChange("limo"); return false;">Limousine services</a></h2> <h2 id="fixer"><a href="javascript:serviceChange("taxi"); return false;">Taxi Cab Services</a></h2>
             	<ul id="service-list">
                	<li><strong>Airport Service:</strong> <span>Pick Up and Drop Off</span></li>
                    <li><strong>Sightseeing and Shopping Tour:</strong><span>Enjoy spectacular sights of South Florida and The keys.</span></li>
                    <li><strong>wedding:</strong><span>Make your wedding a pleasurable experience with our luxury limo.</span></li>
                    <li><strong>Bachelor or Bachelorette Party:</strong><span>It may be the last time, so do it elegantly with all the fun a limo ride can provide.</span></li>
                    <li><strong>Prom and Graduation:</strong> <span> One and only unique moment that is required an indelible memory, using our limo services is best way to celebrate it with all of friends and family.</span></li>
                    <li><strong>Dining Extravaganza with a Night on Town:</strong> <span>Eat and drink all you want in the finest restaurants and club in South Florida.</span></li>
                    <li><strong>Impress someone in a stretched limousine for up to 4 hours:</strong> <span>This unbelievable trip can win someone heart for a long time.</span></li>
                    <li><strong>Limo Bar Hopping:</strong> <span> Visit all the bars and night clubs in one night to have the ultimate fun.</span></li>
                    <li><strong>Birthday:</strong> <span>Take your birthday on the road with a luxury limo to maximize the fun.</span></li>
                    <li><strong>Reward your business partner or your staff:</strong> <span>This luxury limo ride and treat may increase productivity and profit.</span></li>
                    <li><strong>Renew your Anniversary:  </strong> <span>A luxury limo ride can add a more fun to your celebration.</span></li>
    </div>
      </div>
    </div>
    Not working..

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Try changing this:
    <a href="#" onclick="serviceChange("limo"); return false;">

    To this:
    <a href="#" onclick="serviceChange('limo'); return false;">

    Likewise for the other one.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there dingoegret,

    you must code your strings in this manner...
    Code:
    
    document.getElementById('service-list').innerHTML =
    'line one'+
    'line two'+
    'line three'+
    ....
    ....
    'last line';
    
    coothead

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355

    Lightbulb Just an observation ...

    I'm not sure I understand why you are using so much JS to solve this problem.
    While the displays may be in the opposite display order, I think this is what you are trying to accomplish.
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Taxi / Limo Services </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=255479
    
    //<![CDATA[
    function show(IDS) {
      document.getElementById('Limo-service-list').style.display = 'none';
      document.getElementById('Taxi-service-list').style.display = 'none';
      document.getElementById(IDS).style.display = 'block';
    }
    //]]>
    </script>
    <style type="text/css">
    #Taxi { cursor:pointer; }
    #Limo { cursor:pointer; }
    </style>
    
    </head>
    <body>
    
    <h1>Limousine and Taxi cab services that we offer</h1>
    
    <h2 id="Limo" onclick="show('Limo-service-list')">Limousine Services</a></h2>
    <ul id="Limo-service-list" style="display:block">
     <li><strong>Airport Transportation</strong></li>
     <li><strong>Sightseeing</strong></li>
     <li><strong>Shopping</strong></li>
     <li><strong>Sporting Events</strong></li>
     <li><strong>Conventions</strong></li>
    
    <h3>We Offer</h3>
     <li><strong>State-of-the-Art, Computer-Dispatch System</strong></li>
     <li><strong>24-Hour Service‹Supervisors Always on Duty</strong></li>
     <li><strong>Trained, Courteous, & Professional Drivers</strong></li>
     <li><strong>Safe, Clean, Air-Conditioned Vehicles</strong></li>
     <li><strong>Corporate Accounts Welcome</strong></li>
    </ul>
    
    <h2 id="Taxi" onclick="show('Taxi-service-list')">Taxi Cab Services</a></h2>
    <ul id="Taxi-service-list" style="display:none">
     <li><strong>Airport Service:</strong> <span>Pick Up and Drop Off</span></li>
     <li><strong>Sightseeing and Shopping Tour:</strong>
     <span>Enjoy spectacular sights of South Florida and The keys.</span></li>
     <li><strong>wedding:</strong><span>Make your wedding a pleasurable experience
     with our luxury limo.</span></li>
     <li><strong>Bachelor or Bachelorette Party:</strong>
     <span>It may be the last time, so do it elegantly with all the fun
     a limo ride can provide.</span></li>
     <li><strong>Prom and Graduation:</strong> 
     <span> One and only unique moment that is required an indelible memory,
     using our limo services is best way to celebrate it with all of friends and family.</span></li>
     <li><strong>Dining Extravaganza with a Night on Town:</strong>
     <span>Eat and drink all you want in the finest restaurants and club in South Florida.</span></li>
     <li><strong>Impress someone in a stretched limousine for up to 4 hours:</strong>
     <span>This unbelievable trip can win someone heart for a long time.</span></li>
     <li><strong>Limo Bar Hopping:</strong>
     <span> Visit all the bars and night clubs in one night to have the ultimate fun.</span></li>
     <li><strong>Birthday:</strong>
     <span>Take your birthday on the road with a luxury limo to maximize the fun.</span></li>
     <li><strong>Reward your business partner or your staff:</strong>
     <span>This luxury limo ride and treat may increase productivity and profit.</span></li>
     <li><strong>Renew your Anniversary:  </strong>
     <span>A luxury limo ride can add a more fun to your celebration.</span></li>
    </ul>
    
    </body>
    </html>
    Anywhere near correct?
    There is no need to duplicate the display code in the HTML
    and JS just to make different parts appear/disappear.

Thread Information

Users Browsing this Thread

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

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



Recent Articles