JavaScript - Javascript Select Divs

Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one?

Here is part of the javascript I have in my page head:

Code:

function getMgmtHours(str)
{
if (str=="")
  {
  document.getElementById("mgmthours").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {
   // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mgmthours").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}

function getDays(str)
{
if (str=="")
  {
  document.getElementById("mgmtdate").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {
   // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}

Here is the HTML/PHP portion being used:
PHP Code:
echo "<p>";
echo "Submit hours:";
echo "<form>";
echo "<select name='district' onchange='getMgmtHours(this.value)'>";
echo "<option value=''>Select a district:</option>
<option value='1'>1</option>
<option value='3'>3</option>
<option value='4'>4</option>";
echo "</select>";
echo "</form>";
echo "</p>"

echo "<p>";
echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>";
echo "Weekending Day: ";
echo "<select name='weekending' onchange='getDays(this.value)'>";
echo "<option value=''>Choose a Date:</option>";

while ($week < 32) {
    $nextsunday = strtotime("next Sunday");
    
    if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;}
    
    $weekending = date('M. d, Y', $timestamp);
    echo "<option value='" . $weekending . "'>" . $weekending . "</option>";
    $week = $week + 1;
}

echo "</select>";

echo "<div id='mgmtdate' />";
echo "<div id='mgmthours' />";
echo "</p>"; 


Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page.

Hi!

I'm working on a website where I need some help with open and closing divs using javascript.

This is the website: clashjeans.se/test/styles.html

As you can see I'm using a javascript to open each jeans style link, I don't know if this is the best way to do it, but it's how I've done it so far. If you click the "Frankie style link" at the bottom the div called Frankie will show and you will see a little image in that div that says "next wash". What I would like this link to do is to close the frankie div and open up another wich looks almost the same as the previous, the only thing that will change is the pictures actually. Please help me solve this problem, any suggestion about how to make this work will be highly appreciated!

I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing.

this is my current javascript:

var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}

And this is just one of the links:

<li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li>

And this is one of the back to top/next button codes:

<a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a>
<a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a>


This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much.

Ok, basically I am using the script bellow to produce a javascript slideshow similar to this: http://www.valvesoftware.com/ but instead of the red boxes I want an image representing each slide.

My problem is, I can't figure out how to call in a different image for each of these tabs (Paginates).

Any help would be much appreciated, thanks.

HEAD: Code:

<style type="text/css">
/*<![CDATA[*/

#tst {
  position:relative;width:880px;height:400px;
}

#paginate {
  position:absolute;z-Index:4;left:760px;top:15px;height:20px;
}

#paginate .default {
  position:relative;width:100px;height:50px;margin-bottom:27px;border:solid black 1px;background:url(images/imagehold.png);
}

#paginate .active {
  background:url(images/imagehold_o.png);
}

/*]]>*/
</style><script type="text/javascript">
// Animate (24-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// The functional code size is 1.39K

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// whe 
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 2 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// whe 
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
  d=Math.max(d,s<0||f<0?d:0);
  this.data[0]=d;
  this.apply();
  if (ms<this.mS){
   this.to=setTimeout(function(){oop.cng(); },10);
  }
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

</script>

BODY: Code:

<script  type="text/javascript">
/*<![CDATA[*/

function zxcFadeSlideShow(o){
 var obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),z0=0,ary=[],ms=o.FadeDuration,hold=o.Hold,srt=o.AutoStart,pag=document.getElementById(o.PaginateID),pary=[],z1=0;
 for (;z0<imgs.length;z0++){
  imgs[z0].style.position='absolute';
  imgs[z0].style.zIndex=z0>0?'0':'2';
  imgs[z0].style.left='0px';
  imgs[z0].style.top='0px';
  zxcOpacity(imgs[z0],z0>0?0:100);
  ary[z0]=new zxcAnimate('opacity',imgs[z0],z0>0?0:100);
 }
 if (pag){
  this.cls=['default','default active'];
  for (;z1<ary.length;z1++){
   pary[z1]=document.createElement('DIV');
   pary[z1].className=this.cls[z1>0?0:1];
   pag.appendChild(pary[z1]);
   this.addevt(pary[z1],'mouseup','page',z1);
  }
 }
 this.ary=ary;
 this.pary=pary;
 this.lstp=pary[0];
 this.ms=typeof(ms)=='number'?ms:1000;
 this.hold=(typeof(hold)=='number'?hold:1000)+this.ms;
 this.srt=typeof(srt)=='number'?srt+this.ms:false;
 this.to=null;
 this.cnt=0;
 this.lst=ary[this.cnt];
 this.Auto(this.hold);
}

zxcFadeSlideShow.prototype={

 Next:function(cnt,goto){
  this.Pause();
  if (this.lstp){
   this.lstp.className=this.cls[0];
  }
  this.lst.obj.style.zIndex='0';
  this.lst.animate(this.lst.data[0],0,this.ms,[0,100]);
  this.lst=this.ary[cnt];
  this.lst.obj.style.zIndex='2';
  this.lst.animate(this.lst.data[0],100,this.ms,[0,100]);
  if (this.pary[cnt]){
   this.lstp=this.pary[cnt];
   this.lstp.className=this.cls[1];
  }
  this.cnt=cnt;
  if (goto&&this.srt){
   var oop=this;
   this.to=setTimeout(function(){ oop.auto(); },this.srt);

  }
 },

 page:function(nu){
  this.Next(nu,true);
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 },

 Auto:function(ms){
  var oop=this;
  this.to=setTimeout(function(){ oop.auto(); },ms||500);
 },

 Pause:function(){
  clearTimeout(this.to);
 },

 auto:function(){
  this.Pause();
  var oop=this,cnt=this.cnt;
  cnt=++cnt%this.ary.length;
  this.to=setTimeout(function(){ oop.Next(cnt); oop.auto(); },this.hold);
 }


}

S=new zxcFadeSlideShow({
 ID:'tst',              //(optional) unique ID name of the paent DIV.                   (string )
 PaginateID:'paginate', //(optional) unique ID name of the paginate DIV.                (string, default = no pagination)
 FadeDuration:1000,     //(optional) the fade duration in milli seconds.                (number, default = 1000)
 Hold:6000,             //(optional) the 'hold' between auto rotation in milli seconds. (number, default = 1000)
 AutoStart:2000         //(optional) auto start after goto.                             (number, default = no auto start)
});

x=new zxcAnimate('opacity',document.getElementById('tst'))
//x.animate(0,100,1000)
/*]]>*/
</script>

Hi!

I'm no JavaScript expert so wonder if you could help?

I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript?

I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction?

Any help will be really welcome! Thank you!

Hi,

Sorry for the (HELP!) addition in the title, but i'm just stumped here. I am trying to show and hide div layers when I click on a button in a flash movie. The flash movie is in it's own div and the content below is also in it's own div. Is there a way to call the function from flash so that content in another div is affected?

The code to show and hid layers in html is working and is he

Code:

//visible layers
function $_(IDS) { return document.getElementById(IDS); }

function setVisible( IDS ) {
  var obj;
  var sel = $_('divContent').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) {
    obj = sel[i].id;
    if (obj != IDS) { $_(obj).style.display = 'none'; }
    else { $_(obj).style.display != 'block' ? $_(obj).style.display="block" : $_(obj).style.display="none"; }
  }
}
window.onload = function() {
setVisible('BIO');
};
</script>
</head>

<body>
<div id="navigation">
<a href="#" onClick="setVisible('BIO'); return false;">Who I Am</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('News'); return false;">What's New</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Portfolio'); return false;">Portfolio</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Resume'); return false;">Resume</a>
</div>

<div id="divContent">
                <div id="BIO" class='divElem'>
                <p>This is my content for bio</p>
                </div>
                <div id="News" class='divElem'>
                <pThis is my content for news</p>
                </div>
                <div id="Portfolio" class='divElem'>
                <p><This is my content for portfolio </p>
                </div>
                <div id="Resume" class='divElem'>
                <p>This is my content for resume</p>
                </div>
</div>

</body>

Is there a way to call the function in flash on a button? Any help you can give would be GREATLY appreciated.

Thanks and forever indebted.

Gerry

I have an javascript coding issue with regards to a tabbed menu.

The code is supposed to hide the unselected divs and show the selected div, but all divs are showing and no tab is selected when the page initialises.

The source code is viewable he http://www.kenaani.co.uk

I was following this tutorial: http://www.elated.com/articles/javascript-tabs/

Which works fine in this example: http://www.elated.com/res/File/artic...ript-tabs.html

I have tried commenting out the other scripts, and the divs still show on the page, so I don't think its a conflicting issue.

Am hoping that someone can spot whatever is going wrong.

Hi all,

I am a newbie to JS. So please extend your help suggesstion to solve this problem I have.

I have 2 select boxes. Data in one select box is corresponding to the data in the other select box. When the user comes in and selects example the 3rd element from the first or second select box the correspoinding 3rd element from the other select box should be selected.

Please help with the solution.Thanks in advance

I have got this piece of code where JavaScript will change a FORM OPTION if it has been selected before (incase the user returns to the page - doesn't have to refill in things), but its not working and my web browser reports this error:
Quote:
Error: document.getElementById("Dr") is null
This is the code:
Code:

<SCRIPT type="text/javascript">
	document.getElementById("<?php echo $_SESSION['recipient']['title']; ?>").selected = "selected";
</SCRIPT>

Code:

<FORM action="process.html" method="post">
	<DIV class="deliveryinformationdata">
		<DIV>
			<B>Title:</B>	<SELECT name="title">
						<OPTION></OPTION>
						<OPTION id="Dr">Dr</OPTION>
						<OPTION id="Miss">Miss</OPTION>
						<OPTION id="Mr">Mr</OPTION>
						<OPTION id="Mrs">Mrs</OPTION>
						<OPTION id="Ms">Ms</OPTION>
					</SELECT>
		</DIV>
		<INPUT type="submit" value="Submit">
	</DIV>
</FORM>

Can anyone see a problem?

So i have this weird problem that only occurs in IE, in combination with Adsense. I also tried FF and Chrome and it does not occur in those browsers. I use javascript to swap around divs, since css 'order' is not supported in every browser (at least not working for my iphone 4). The swapping is working fine in IE when you resize from a screen larger than 1024 to a screen smaller than 1024 and then to a screen larger than 1024. However it does not work well when you open the page/script in a screen smaller than 1024 and then make it larger (in IE). The sidebar 'aside' stays on the right side after 'article' instead of moving to the left. This only happens when i use adsense in the sidebar.. Otherwise it all works fine... Very weird to me.. Anyone who can help out?

See this weird problem he JS Bin

Here is the code:

Code:

<html>
    <head>
<style>
    html,
    body {
        padding: 0;
        margin: 0;
        background: #eee;
    }
    body {
        padding: 0 3%
    }
    header,
    footer,
    .slogan,
    .page-wrapper,
    .headline-wrapper,
    aside,
    article {
        box-sizing: border-box
    }
    .slogan,
    aside,
    article {
        background: #fff
    }
    aside,
    article {
        padding: 20px;
        border-radius: 10px;
        margin: 10px 0 0 0;
        -webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
        -moz-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
        box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
    }
    header,
    footer {
        padding: 20px
    }
    @media (min-width:1024px) { 
        .page-wrapper,
        header,
        footer {
            width: 100%;
            margin: 0 auto;
            max-width: 1200px;
        }
        .page-wrapper {
            display: table;
            width: 100%;
            padding-top: 50px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .page-wrapper > aside,
        .page-wrapper > article {
            display: table-cell;
            padding: 20px;
        }
        .page-wrapper aside {
            width: 30%
        }
        article {
            position: relative
        }
        .slogan {
            padding: 0 20px;
            border-bottom: 0px;
            width: 100%;
            margin: 0;
            line-height: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: -50px;
        }
        .slogan {
            border-radius: 10px 10px 0 0;
            -webkit-box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
            -moz-box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
            box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
            background: #ddd;
        }
        article {
            border-radius: 0 0 10px 0
        }
        aside {
            border-radius: 10px 0 0 10px
        }
    }

    </style>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script type='text/javascript'>
    function handleMargins() {
         var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        if(width < 1024) {
            $(".page-wrapper").each(function() {
            var detach = $(this).find("aside").detach();
            $(detach).insertAfter($(this).find("article"));
            })
        }
         if(width >= 1024) {
            $(".page-wrapper").each(function() {
            var detach = $(this).find("article").detach();
            $(detach).insertAfter($(this).find("aside"));
            })
        }

    }  
    jQuery(document).ready(handleMargins);
    $(window).resize(handleMargins);
    </script>
    </head>
    <body>

      <header>header</header>


      <div class="page-wrapper">

        <aside> sidebar <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- N_Responsief_Alle_CTR_AlleAdsenseSites -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-3961745091197220"
         data-ad-slot="3968514626"
         data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></aside>


      <article>

            <h3 class="slogan">One line slogan only

            </h3>





        <p>This is the articlediv</p>
      </article>
      </div>

      <footer>footer</footer>

    </body>
    </html>

Reply With Quote




12-23-2014, 03:35 PM #2
sunfighter View Profile View Forum Posts

Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts

You need a doctype! maybe add <!DOCTYPE html> at the top of this code. IE needs a doctype or it is screwy.

Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed?

I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you.

Broken down into parts I think I need to do the following:

a) Standard HTML form with drop downs etc and submit
b) Hidden divs
c) Submission process locally to javascript function to determine which product to show/hide
d) Javascript function that makes the decision
e) Javascript that hides/shows products

Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks!

cheers
frank

Hi,

would someone know how to convert the left side (textbox) into the same thing as the right has (select box) also by modifying the JS code from the example of this URL:

http://www.mredkj.com/tutorials/tableaddrow.html

?

It would be a really good feature to have if two select options were used from side-to-side rather than a textbox and a select list.

Hi all,

I am newbie to JS. I have the below task. Please advise.

I have a result set of a query being displayed on a page. (5000+ rows).

I have to provide a search capability, a search box which will enable to enter a position ID number and the entered position ID by the user should be selected from the results in a different color.

Can you please help me with the above. Thanks in advance

Here's the code that I'm working with:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type ="text/javascript">
function HouseSel(){
document.getElementById("HouseSelect").value = '3'
alert (document.getElementById("HouseSelect").value);
}
</script>
</head>

<body>


<form action="https://www.paypal.com/us/cgi-bin/webscr" method="post" name="_xclick">

<select name="item_name" id="HouseSelect">
                  <option value="0" selected="selected">--Please Select a House--</option>
                  <option value="1">Nags Head</option>
                    <option value="Rent Deposite: Calib  ">Calibre</option>
                </select>

<input name="calculate3" type="button" id="calculate3" tabindex="2"     
        onclick="HouseSel(); " value="Calculate"/>
        </form>
</body>
</html>

But it's still returning the initial value. How do I get it to 3?

Calculating quiz answers?

Code:

var correctAnswers = new Array();

correctAnswers[1] = "Extensible Hypertext Markup Language";

correctAnswers[2] = "<p></p>";

correctAnswers[3] = "<br />";



function checkAnswers(){

    var score = 0;

    for (i=1; i<4; i++){

        correctAnswers = getSelectValue("quiz","q" + i);

        if (correctAnswers == correctAnswers[i]){

            score++;

        }

    }