Works in firefox/safari/opera but not in IE

[bobmcjob]

Hi,

im building a website where you click an image on a map and it ticks the checkbox in a form associated with that image. There are 11 images and 11 checkboxes. Im using a onclick="checked(1);" through to "onclick="checked(11);" on each image link which refers to this JS script:

function checked(n) {
	   box = eval("document.getElementById('deal'+n)");
	   if (box.checked == false) {
		  box.checked = true;
		  this.styles
	   } else {
		  box.checked = false;
	   }
	}

each checkbox has the id="deal1" through to id="deal11"

Currently it works a treat in everything except IE. when you click it checks the box and when you click again it unchecks it. IE however does nothing.

Any help would be much appreciated

[JMRKER]

Try this ...

function checked(n) {
       box = document.getElementById('deal'+n);
       if (box.checked == false) {
          box.checked = true;
       } else {
          box.checked = false;
       }
    } 

[bobmcjob]

cheers, i gave it a whirl, still doesnt work in IE

im only new to javascript is there a common rule or something im missing as to why firefox 3/2 and every other browser interprets it correctly but IE doesn't?

[JMRKER]

cheers, i gave it a whirl, still doesnt work in IE

im only new to javascript is there a common rule or something im missing as to why firefox 3/2 and every other browser interprets it correctly but IE doesn't?

Can you post the full script?
It should work, but you might have an error elsewhere.

[bobmcjob]

Firstly here is the image map which calls the checked(); function when the image is clicked. I have other functions that show hidden info divs when the mouse hovers over the image.

 <map name="Map" id="Map">
                    <area shape="poly" coords="421,374,431,390,444,403,435,449,418,453,407,445,408,415,432,411,411,379" href="#deal1" alt="" onmouseover="showtext(1);showbox();" onmouseout="hidebox();" onclick="checked(1)" />
                    <area shape="poly" coords="307,428,295,427,324,353,343,409,339,422,326,428" href="#deal2" alt="" onmouseover="showtext(2);showbox();" onmouseout="hidebox();" onclick="checked(2)" />
                    <area shape="poly" coords="236,410,217,366,207,397,205,450,233,450" href="#deal3" alt="" onmouseover="showtext(3);showbox();" onmouseout="hidebox();" onclick="checked(3)" />
                    <area shape="poly" coords="315,328,372,328,374,310,347,293,315,307" href="#deal4" alt="" onmouseover="showtext(4);showbox();" onmouseout="hidebox();" onclick="checked(4)"/>
                    <area shape="poly" coords="290,513,285,441,308,434,331,464,336,514" href="#deal5" alt="" onmouseover="showtext(5);showbox();" onmouseout="hidebox();" onclick="checked(5)"/>
                    <area shape="poly" coords="333,347,373,368,385,337,356,335" href="#deal6" alt="" onmouseover="showtext(6);showbox();" onmouseout="hidebox();" onclick="checked(6)"/>
                    <area shape="poly" coords="393,345,448,345,437,333,450,315,435,305,422,309,391,329" href="#deal7" alt="" onmouseover="showtext(7);showbox();" onmouseout="hidebox();" onclick="checked(7)" />
                    <area shape="poly" coords="281,60,339,57,321,38,301,24" href="#deal8" alt="" onmouseover="showtext(8);showbox();" onmouseout="hidebox();" onclick="checked(8)"/>
                    <area shape="poly" coords="227,127,310,124,296,67,266,71,234,106" href="#deal9" alt="" onmouseover="showtext(9);showbox();" onmouseout="hidebox();" onclick="checked(9)"/>
                    <area shape="poly" coords="64,118,171,119,172,80,66,80" href="#deal10" alt="" onmouseover="showtext(10);showbox();" onmouseout="hidebox();" onclick="checked(10)"/>
                    <area shape="poly" coords="181,61,127,73,88,62,112,42,153,44" href="#deal11" alt="" onmouseover="showtext(11);showbox();" onmouseout="hidebox();" onclick="checked(11)"/>
					<area shape="poly" coords="57,65,36,54,15,74,18,100,40,122,56,118" href="#deal12" alt="" onmouseover="showtext(12);showbox();" onmouseout="hidebox();" />
                    <area shape="poly" coords="292,137,358,110,403,141,344,150" href="#deal13" alt="" onmouseover="showtext(13);showbox();" onmouseout="hidebox();" />
                    <area shape="poly" coords="71,186,131,185,118,151,100,125,75,160" href="#deal14" alt="" onmouseover="showtext(14);showbox();" onmouseout="hidebox();" />
                    <area shape="poly" coords="90,258,96,237,83,205,118,202,115,234,111,256" href="#deal15" alt="" onmouseover="showtext(15);showbox();" onmouseout="hidebox();" />
                    <area shape="poly" coords="295,288,282,265,292,231,323,233,335,262,323,278" href="#deal16" alt="" onmouseover="showtext(16);showbox();" onmouseout="hidebox();" />
                    <area shape="poly" coords="351,251,352,213,355,189,368,173,377,197,383,220,366,250" href="#deal17" alt="" onmouseover="showtext(17);showbox();" onmouseout="hidebox();" />
                    <area shape="poly" coords="388,291,376,260,382,242,430,249,431,291" href="#deal18" alt="" onmouseover="showtext(18);showbox();" onmouseout="hidebox();" />
                    <area shape="poly" coords="246,326,306,327,318,356,296,372,249,361" href="#deal19" alt="" onmouseover="showtext(19);showbox();" onmouseout="hidebox();" />
                    <area shape="poly" coords="240,485,247,458,285,492,272,524,246,516" href="#deal20" alt="" onmouseover="showtext(20);showbox();" onmouseout="hidebox();" />
                  
                  </map>

Below is the form where each check box has the id of deal1 through to deal11

<form action="entry.php"  method="post" >
					
                             <fieldset id="offers">
                             
                             	<fieldset class="checkbox">
                                    <input type="hidden" name="deal1" value="" />
                                    <input type="checkbox" name="deal1" id="deal1" />
                                    <label for="deal1">25% off Madagascan Explorer</label>
                                </fieldset>
                                
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal2" value=""/>
                                    <input type="checkbox" name="deal2" id="deal2" />
                                    <label for="deal2">25% off Okavango Experience</label>
                                </fieldset>
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal3" value=""/>
                                    <input type="checkbox" name="deal3" id="deal3" />
                                    <label for="deal3">25% off Namibia Lodge Safari</label>
                                </fieldset>
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal4" value=""/>
                                    <input type="checkbox" name="deal4" id="deal4" />
                                    <label for="deal4">25% off Mt Kilimanjaro Marangu Route</label>
                                </fieldset>
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal5" value=""/>
                                    <input type="checkbox" name="deal5" id="deal5" />
                                    <label for="deal5">50% off 4 Day Kruger Adventure</label>
                                </fieldset>
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal6" value=""/>
                                    <input type="checkbox" name="deal6" id="deal6" />
                                    <label for="deal6">50% off Zanzibar Beach Break</label>
                                </fieldset>
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal7" value=""/>
                                    <input type="checkbox" name="deal7" id="deal7" />
                                    <label for="deal7">50% off Sunrise Balloon Ride</label>
                                </fieldset>
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal8" value=""/>
                                    <input type="checkbox" name="deal8" id="deal8" />
                                    <label for="deal8">Free Dahab Beach Break</label>
                                </fieldset>
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal9" value=""/>
                                    <input type="checkbox" name="deal9" id="deal9" />
                                    <label for="deal9">Free Alexandria City Break</label>
                                </fieldset>
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal10" value=""/>
                                    <input type="checkbox" name="deal10" id="deal10" />
                                    <label for="deal10">50% off Active Morocco</label>
                                </fieldset>
                                
                                <fieldset class="checkbox">
                                    <input type="hidden" name="deal11" value=""/>
                                    <input type="checkbox" name="deal11" id="deal11" />
                                    <label for="deal11">50% off Essaouira Escape</label>
                                </fieldset>
                   		 </fieldset>
                    
                    <h3 class="sub-header">And enter to win a trip to Kenya and Tanzania - tell us why you want to win in 25 words or less</h3>
                    	<fieldset id="entry">
                                <textarea name="comp_entry" title="Competition Entry" id="comp_entry" class="[val,8]" rows="0" cols="0" onkeypress="textCounter(this,this.form.counter,255);" ></textarea>
                     	</fieldset>
                    <!-- End Entry -->
                    		<fieldset id="submit-btn">
                                <input class="continue" type="image" name="submit" src="css/images/btn_continue.gif" value="continue" onclick="entryCheck();" />
							</fieldset>
                            </form>

the javascript that is called from the image map is below

function checked(n) {
       box = document.getElementById('deal'+n);
       if (box.checked == false) {
          box.checked = true;
       } else {
          box.checked = false;
       }
    }

It has me baffeled. Thanks for your help

[Logic Ali]

 <fieldset class="checkbox">
  <input type="hidden" name="deal1" value="" />
  <input type="checkbox" name="deal1" id="deal1" />

document.getElementById in I.E. doesn't distinguish between name and ID, so you cant use the same identifier for name and ID on different elements.

[JMRKER]

How about a link to where the image for the map
and the missing functions (textcounter(), entryCheck(), etc.)
and class="[val,8]" are located.

I'm getting too many errors to find out why the "checked(n)" function doesn't work.

[bobmcjob]

Cheers Logic Ali, i changed the name on the hidden input fields and thats worked!! Thank you everyone for your help