Javascript Webpage Question

**luclanham** · 09-16-2011 05:36 PM

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

**JMRKER** · 09-16-2011 09:06 PM

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: Javascript Webpage Question

Thread Tools

Display

Javascript Webpage Question

Something to try...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions