www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript Webpage Question

  1. #1
    Join Date
    Sep 2011
    Posts
    1

    Javascript Webpage Question

    Hi,

    I'm designing my first webpage and I have a problem.
    I have several <input type="button">'s that a visitor can or can not click on.

    I am wondering if there is a way to record which buttons they do click on so I can display different material based on whatever buttons they clicked.

    For example:
    They click button 1, and options A, B, and C show up.
    They click button 2, and options D, E, and F show up.
    They click buttons 1 and 3, and options A, C, and F show up.

    Is there a way to do this with Javascript? Do I need to learn a server-side language like PHP?

    Thanks,
    Ryan

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb Something to try...

    See if you can modify this to your needs...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    var blks = ['A','B','C','D','E','F'];
    function show(tarr) {
      for (var i=0; i<blks.length; ++i) {
        document.getElementById('blk'+blks[i]).style.display = 'none';
      }
      for (var i=0; i<tarr.length; ++i) {
        document.getElementById('blk'+tarr[i]).style.display = 'block';
      }
    }
    window.onload = function() { show([]); }
    </script>
    <style type="text/css">
    .divBlk { height:100px; width:200px; border:1px solid black; }
    #blkA { background-color:lightblue; }
    #blkB { background-color:lightred; }
    #blkC { background-color:yellow; }
    #blkD { background-color:lime; }
    #blkE { background-color:orange; }
    #blkF { background-color:magenta; }
    </style>
    
    </head>
    <body>
    <button onclick="show(['A','B','C'])">Button 1</button>
    <button onclick="show(['E','E','F'])">Button 2</button>
    <button onclick="show(['A','C','F'])">Button 3</button>
    
    <div id="blkA" class="divBlk">Block A information</div>
    <div id="blkB" class="divBlk">Block B information</div>
    <div id="blkC" class="divBlk">Block C information</div>
    <div id="blkD" class="divBlk">Block D information</div>
    <div id="blkE" class="divBlk">Block E information</div>
    <div id="blkF" class="divBlk">Block F information</div>
    </body>
    </html>
    Good Luck!

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