JavaScript - Script Not Working In Just Ie8
We have an ASP website which everything works fine in pre-IE8, firefox and even our iPhone browsers but not IE8.
I know what the problem is and where the problem is but don't know how to fix it, it should be pretty simple but I am not a developer...just trying to fix this one problem When the page loads it is supposed to automatically fill in a text box with the word: No This is the javascript that is supposed to do that: Code: <script type="text/javascript"> function statusdefault(oSel) { status = 'No'; document.getElementById('theLabel5').value = status; } </script> and this shows the onload line: Code: <body onload="statusdefault(this)" bgcolor="#FFFFFF" background="images/background_stripe.jpg" text="#000000" link="#CCCCCC" vlink="#CCCCCC" alink="#CCCCCC" leftmargin="0" topmargin="10" marginwidth="0" marginheight="10"> <form action="<%=MM_editAction%>" method="POST" name="frmDetail" id="frmDetail"> additionally when someone changes a selection in one of the comboboxes it should change the textbox to: Yes Here is the code for that (which also does not work): Code: <script type="text/javascript"> function statusupdated(oSel) { status = 'Yes'; document.getElementById('theLabel5').value = status; } </script> which of course gets triggered by this: Code: <select name="lstQueue" id="select" onChange="statusupdated(this)"> This is the code for the said textbox: Code: <input name="txtStatusUpdated" type="text" id="theLabel5" value="<%=(rsQ.Fields.Item("StatusUpdated").Value)%>"> The error I get in IE8 is "This page cannot be displayed..." and give a http500 error with no other info. It looks like this javascript code was copied and pasted throughout this same ASP page and altered to do different things. All of the other scripts like this one work fine so I know it is just something in these particular ones that have a problem. Thanks for any help that can be given!!! Scott Similar TutorialsHey, I'm a total noob when it comes to javascript. and manged to make this code for a different forum: Code: //This script was created by TROPAFLIGHT2 var d=new Date(); var theDay=d.getDay(); switch (theDay) { case 1: document.write("<EMBED src="http://bit.ly/Ky9R5F" autostart=true loop=true volume=100 hidden=true>"); break; case 2: document.write("<EMBED src="http://bit.ly/Ky9R5F" autostart=true loop=true volume=100 hidden=true>"); break; case 3: document.write("<EMBED src="http://bit.ly/JGUdU9" autostart=true loop=true volume=100 hidden=true>"); break; case 4: document.write("<EMBED src="http://bit.ly/JMVvl0" autostart=true loop=true volume=100 hidden=true>"); break; case 5: document.write("<EMBED src="http://bit.ly/JVq7yb" autostart=true loop=true volume=100 hidden=true>"); break; case 6: document.write("<EMBED src="http://bit.ly/J7fvwY" autostart=true loop=true volume=100 hidden=true>"); break; default: document.write("<EMBED src="http://bit.ly/J2mc7a" autostart=true loop=true volume=100 hidden=true>"); } That code obviously didn't work so I manged to fix certain things: Code: //This script was created by TROPAFLIGHT2 var d=new Date(); var theDay=d.getDay(); switch (theDay) { case 1: document.write;"(<EMBED src="//bit.ly/Ky9R5F" autostart=true loop=true volume=100 hidden=true>)"; break; case 2: document.write;"(<EMBED src="//bit.ly/Ky9R5F" autostart=true loop=true volume=100 hidden=true>)"; break; case 3: document.write;"(<EMBED src="//bit.ly/JGUdU9" autostart=true loop=true volume=100 hidden=true>)"; break; case 4: document.write;"(<EMBED src="//bit.ly/JMVvl0" autostart=true loop=true volume=100 hidden=true>)"; break; case 5: document.write;"(<EMBED src="//bit.ly/JVq7yb" autostart=true loop=true volume=100 hidden=true>)"; break; case 6: document.write;"(<EMBED src="//bit.ly/J7fvwY" autostart=true loop=true volume=100 hidden=true>)"; break; default: document.write;"(<EMBED src="//bit.ly/J2mc7a" autostart=true loop=true volume=100 hidden=true>)"; } Problem is, it still doesn't work and I don't really know why. I've stared at it for a long time but the problem didn't click like last time. Any help at all would be appreciated. Thanks in advance, me. Hi there Im having an issue with some javascript that works fine in IE, but in FF is not working properly. The script is used to display a list of check boxes, the user can expand, which can checked to enabke a users selection of products. This is the script: Code: <script type="text/javascript"> var xcNode = []; // m = Parent UL ID // c = function xcSet(m, c, q, isCompletedLength) { if (document.getElementById && document.createElement) { var xs = m; m = document.getElementById(m).getElementsByTagName('ul'); var d, p, x, h, i, j; for (i = 0; i < q; i++) { var xp = document.getElementById("_" + xs + i); if (d = xp.getAttribute('id')) { if (navigator.userAgent.indexOf("Firefox") != -1) { var lstr = TrimTags((document.getElementById(xs).innerHTML)); xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', lstr.length, isCompletedLength); x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', lstr.length, isCompletedLength); } else { xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', (document.getElementById(xs).innerText).length, isCompletedLength); x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', (document.getElementById(xs).innerText).length, isCompletedLength); } p = xp.parentNode; if (h = !p.className) { j = 2; while ((h = !(d == arguments[j])) && (j++ < arguments.length)); if (h) { if (xp.name == parseURL()) { xp.style.display = 'block'; x = xcNode[d + 'c']; } else { xp.style.display = 'none'; x = xcNode[d + 'x']; } } } p.className = c; var expand = document.getElementById("expandBtn_" + xs + "0"); expand.insertBefore(x, expand.firstChild); } } } } works fine in IE, but not in Firefox where the expanded list is not showing the current number of items (checkboxes), it shows 34 check boxes in IE but only 17 in firefox. Thanks in advance Ok, I've determined that my problem wasn't in the script itself, but in the fact that Opera 10 Beta 2 apparently does not recognize the "onload" attribute of the body tag. Is there a way to work around this?
Nice for a change: a piece of code that does work in all versions of IE, but not in Firefox. I'm stuck. Code: <img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters_uit.png" name="loodgieters" border="0" style="margin-right:1px; margin-top:1px; float:left; cursor:pointer;" onclick="document.location='/pages/loodgieters.php';" onmouseover="foto1.style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png'" onmouseout ="foto1.style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png'" /> Explanation: element "loodgieters" is a menu button that should change on mouseover. It doesn't in FF, it does in IE. Secondly, when you "mousover" the image, it should change the backgroundcolor of a second element (foto1). Element 'foto1' is a table cell. In return, when you mouse-over this table cell, the image element 'loodgieters' should change as well. So it's a two-way thing. The code for the table cell is: Code: <td height="189" id="foto1" bgcolor="#008ac9" valign="top" onmouseover="style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png';" onmouseout="style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png';" style="cursor:pointer;" onclick="document.location='/pages/loodgieters.php';"> <img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters.png" style="border:0; margin-left:auto; margin-right:auto; margin-top:10px; display: block;" /></td> Again: it all works as I expected in IE, Safari and Chrome, but it does not in Firefox. The whole page validates as XHTML 1.0 Transitional What am I overlooking here? I'm stuck. Any help is welcome Hey: I have two javascripts on my page but one isn't showing with both codes in page. [CODE]<script type="text/javascript" src="js/image-slideshow.js"></script>[ICODE] The above code is for the image slide. When this is in the html the other one doesn't work (a text changer). The wbesite is http://www.uwics.com/constitution.htm There is no text at the top of the page currently. If you check Home you'll see how it should be. Any help would be greatly appreciated. Thank you, Mitka <script type="text/JavaScript"> function refreshPage(s) { window.location.reload(); if((s.options[s.selectedIndex].value) = "zed=catcher") { alert (s.selectedIndex); //this is showing <?PHP //the next lines does not execute????? echo $form['service_code']->renderLabel(); echo $form['service_code']->renderError(); echo $form['service_code']; ?> } } </script> please help? thanks Hello, Im new to scripting. I have 2 scripts that work in firefox but not in ie. I was wondering if anyone could help me? The First Javascript Code: <SCRIPT language="javascript"> <!-- // ***** GET TOTAL function CalculateSum(setup, month, plan, form) { var A = parseFloat(setup); var B = parseFloat(month); form.x_amount.value = A + B; form.user5.value = plan; } --> </SCRIPT> The second javascript Code: var os_price = 0; var base_price = 0000; var total_carryover = 0000; function show_price() { features = 0; for(var pr in price) { features+=price[pr]; } month = features + base_price + os_price ; total = month + total_carryover; document.getElementById('setup_price').innerHTML="$"+(setup)/100; document.getElementById('monthly_price').innerHTML="$"+(month)/100; document.getElementById('total_price').innerHTML="$"+((total)/100+setup/100); } Thanks in advance for any help. Hi All, I am using one script which is functioning properly incase of IE but incase of Mozilla evenif the shift key is pressed and any character key is pressed then it is displaying Caps Lock is On. can anyone tell how can I make it Mozilla and IE compatible. Hi all, thanks in advance for any help. For a lot of years now I've used a javascript that does a simple rollover image swap, but also changes another alternate image at the same time. It's always worked like a charm. Lately I realized that the script no longer works in IE, though it used to in older versions of IE (I think it stopped working in anything past IE 7). It still works fine in Firefox, Safari, etc. I haven't been able to find a good alternative for this script, so I'm really trying to get it to work again in IE, but so far no luck. Here's the link to the actual script itself. http://www.jsmadeeasy.com/javascript...nges/index.htm (you can see that even the example on this page doesn't work in IE anymore) You can also see it in action at this site: http://www.augustroad.com/ (notice when you roll over the menu bar an alternate image appears in FF, but not in IE). Again, thanks in advance for any help. I truly appreciate it! Jordan Dear All Experts I wrote a simple code in javascript and it is working fine with IE but when I open the page in FireFox or in Google Crome it is not working as I expect. Actually I am enabling and disabling the combo box on the on change event of radio button. Please check the code attached here. And visit my site for output www.crispwerx.com/catasset Thanx to all viewer and helper Hey ! You know I'm now trying to use that light box embed contact form in my page http://uniwebmart.com/roshan and that fade in fade out effect as well which you can see now in LCD. But when I use the java script of that embed contact form in lightbox, my previous script of fading doesn't work. <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/fadeslideshow.js"></script> bold one is newly added script. Can't figure out the mistake. Can you please help me once again people??? Hi there, i have this simple script that replaces the scrollbar of an iframe called iFrame1 with 2 up and down arrow images, but it only works in IE, i've tried it in Chrome and Firefox... here is the code Code: <script type="text/javascript" language="javascript"> function bsh_iFrame1(step,time){hs_iFrame1=setInterval("sh_iFrame1("+step+")",time)} function esh_iFrame1(){clearInterval(hs_iFrame1)} function sh_iFrame1(step) { scrollx=iFrame1.document.body.scrollLeft scrolly=iFrame1.document.body.scrollTop scrolly=scrolly+step iFrame1.window.scroll(scrollx,scrolly) } </script> Code: </td><td align="center" valign="middle" width="31"><img src="up.png" alt="up" border=0 vspace="5" hspace="3" onMouseDown="esh_iFrame1();bsh_iFrame1(-3,2)" onMouseUp="esh_iFrame1();bsh_iFrame1(-1,20)" onMouseOver="bsh_iFrame1(-1,20)" onMouseOut="esh_iFrame1()"><br> <img src="down.png" alt="down" border=0 vspace="5" hspace="3" onMouseDown="esh_iFrame1();bsh_iFrame1(3,2)" onMouseUp="esh_iFrame1();bsh_iFrame1(1,20)" onMouseOver="bsh_iFrame1(1,20)" onMouseOut="esh_iFrame1()"> thanks in advance for any answers... I'm helping out my friend complete her site. check it out he http://themodline.com/clients/jcevent when you head over to the portfolio section the the lightbox script doesnt work properly. but if you just go to http://themodline.com/clients/jcevent/portfolio.html -it works fine. are the scripts mixing up? i made sure i got the correct codes. i made sure the script files are correctly linked. check out my scripts. they are zipped he http://www.themodline.com/clients/jcevent/scripts.zip thanks for the help guys. hope this makes sense! i have a script that measures the window size and - at this point - only adjusts the width of one css element. first function: Quote: var myWidth = 0, myHeight = 0; function getWindowSize() { if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } // window.alert( 'Width = ' + myWidth ); // window.alert( 'Height = ' + myHeight ); } second function: Quote: //changecss JavaScript Functions by Shawn Olson //Copyright 2006-2008 //http://www.shawnolson.net function changecss(theClass,element,value,sheet) { //Last Updated on October 10, 1020 //documentation for this script at //http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html //ms: 5.5.11 added sheet: you have to point at the stylesheet by number var cssRules; var added = false; var mySheet = document.styleSheets[sheet]; if (mySheet['rules']) { cssRules = 'rules'; } else if (mySheet['cssRules']) { cssRules = 'cssRules'; } else { //no rules found... browser unknown } for (var R = 0; R < mySheet[cssRules].length; R++) { if (mySheet[cssRules][R].selectorText == theClass) { if(mySheet[cssRules][R].style[element]){ mySheet[cssRules][R].style[element] = value; added=true; break; } } } if(!added){ try{ mySheet.insertRule(theClass+' { '+element+': '+value+'; }',mySheet[cssRules].length); } catch(err){ try{mySheet.addRule(theClass,element+': '+value+';');}catch(err){} } } } i call the function in a php script that is to rule out that the server is talking to a mobile device, however, it echos javascript and a document ready function: Quote: $useragent=$_SERVER['HTTP_USER_AGENT']; if(preg_match('/android|...(non relevant code)...|zte\-/i',substr($useragent,0,4))) { echo '<link rel="stylesheet" type="text/css" href="1" />'; //the above never happens as i am testing on big screen } else { //echo '<link id="screensize" rel="stylesheet" type="text/css" href="stylesheet.php?cssid=47&mediatype=screen" />'; echo '<script type="text/javascript">'; echo '$(document).ready(function() { getWindowSize(); //ms: these variables come back: myWidth, myHeight if (myWidth >=1225) { changecss(".core-pageWidth","width","1225px",1); } else if (myWidth >1000) { myWidth=myWidth - 20; changecss(".core-pageWidth","width",myWidth+"px",1); } else if (myWidth >910) { myWidth=myWidth - 20; changecss(".core-pageWidth","width",myWidth+"px",1); } }); </script>'; } the changecss() does not work in https but works fine in http. is this to be expected? mario hi all. im having problems with this ajax script i wrote: Code: function admin_adduser() { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } user = document.getElementById('user_user').value; user = user.replace(/^\s+|\s+$/g, '');// trim whitespace //check if name is unique unique = 'false'; var params = "?user=" + escape(user); var url="_check_username.php"; url=url+params; ajaxedInner = ""; xmlHttp.open("GET",url,true); xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT"); xmlHttp.onreadystatechange=stateChanged; xmlHttp.send(null); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { unique = xmlHttp.responseText.replace(/^\s+|\s+$/g, ''); //trims all whitespace! //alert(unique); } } } if(unique == 'true') { //alert("working: " + unique); password = document.getElementById('user_password').value; var params = "?user_user=" + escape(user) + "&user_password=" + escape(password); var url="_admin_add_user.php"; url=url+params; ajaxedInner = "users"; xmlHttp.open("GET",url,true); xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT"); xmlHttp.onreadystatechange=stateChanged; xmlHttp.send(null); document.getElementById('user_password').value = ""; document.getElementById('user_user').value = ""; } else { alert('Please select a unique name for the new staff member\nadd a middle initial maybe?'); } } if i alert(unique) it tells me 'true' (string) but still doesnt go into the create part of the script, i just get the alert('Please select a unique name for the new staff member\nadd a middle initial maybe?'); any ideas? i know im probably missing something basic but its really annoying lol btw - the php for the _check_username.php is simple: PHP Code: <?php if(!isset($_SESSION)) {session_start();} if($_SESSION['authorised'] != true) { exit; } include 'config.php'; include 'opendb.php'; $user = $_REQUEST['user']; $query = "SELECT user FROM user WHERE user='$user'"; echo $query; $result = mysql_query($query) or die('false'); $row = mysql_fetch_array($result, MYSQL_ASSOC); if($row) { echo 'false'; } else { echo 'true'; } mysql_free_result($result); ?> I have used the following script to make provide matching value suggestions for any text typed in the text box and user can select any value by clicking it this works fine in firefox, crome but not in IE. <!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>Ajax Auto Suggest</title> <!--http://www.nodstrum.com/2007/09/19/autocompleter/ --> <script type="text/javascript" src="jquery-1.2.1.pack.js"></script> <script type="text/javascript"> function lookup(inputString) { if(inputString.length == 0) { // Hide the suggestion box. $('#suggestions').hide(); } else { $.post("rpc.asp?inputString="+inputString+"", {}, function(data){ if(data.length >0) { $('#suggestions').show(); $('#autoSuggestionsList').html(data); } }); } } // lookup function fill(thisValue) { $('#inputString').val(thisValue); boxhide(); } function boxhide() { setTimeout("$('#suggestions').hide();", 200); } </script> <style type="text/css"> body { font-family: Helvetica; font-size: 11px; color: #000; } h3 { margin: 0px; padding: 0px; } .suggestionsBox { position: relative; left: 30px; margin: 10px 0px 0px 0px; width: 200px; background-color: #212427; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 2px solid #000; color: #fff; } .suggestionList { margin: 0px; padding: 0px; } .suggestionList li { margin: 0px 0px 3px 0px; padding: 3px; cursor: pointer; } .suggestionList li:hover { background-color: #659CD8; } </style> </head> <body> <div> <form> <div> Type your county: <br /> <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="boxhide();" /> </div> <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="suggestionList" id="autoSuggestionsList"> </div> </div> </form> </div> </body> </html> rpc.asp returns values matching the inputstring passed <li id='suggestedValue' onclick=""fill('Matchvalue');"">Matchvalue</li> Any help? I have a banner ad with an image rotation embedded in a DIV. It works quite fine, but doesn't have required SEO info, ie: alt text. Here is the code that is working. Code: <div style="background-image: url(http://www.earthwindwater.com.au/banners/skiracersworld/banner-bg.png);height:148px;width:982px;border:0px;"> <div style="float:left;height:148px;border:0px;"> <a href="http://www.earthwindwater.com.au" target="_blank"><img border=0 align="absmiddle" alt="Earth Wind and Water Sports Action Cameras" src="http://www.earthwindwater.com.au/banners/skiracersworld/EWW-logo.png" /></a> </div> <div style="height:148px;border:0px;float:right;padding-right:415px; "> <a id="imageurl" target="_blank" ><img id="Rotating1" border="0"></img></a> <script language="JavaScript"> function RotateImages(Start) { var a = new Array("http://www.earthwindwater.com.au/banners/skiracersworld/Contour+.png","http://www.earthwindwater.com.au/banners/skiracersworld/LiquidImage.png","http://www.earthwindwater.com.au/banners/skiracersworld/ContourGPS.png", "http://www.earthwindwater.com.au/banners/skiracersworld/GoPro.png"); var c = new Array("http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contour", "http://www.earthwindwater.com.au/store/cameras/hd-cameras/impact-series-720p-mx-goggle-red", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contourgps", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/gopro-hd-motorsports-hero"); var b = document.getElementById('Rotating1'); var d = document.getElementById('imageurl'); if(Start>=a.length) Start=0; b.src = a[Start]; d.href = c[Start]; window.setTimeout("RotateImages(" + (Start+1) + ")",5000); } RotateImages(0); </script> </div> </div> Now, I thought I would modify the code a little and include "Image Title" and "ALT Text" I am not much of a scripting genius, therefore my modifications don't work. Here is my modified code Code: <div style="background-image: url(http://www.earthwindwater.com.au/banners/skiracersworld/banner-bg.png);height:148px;width:982px;border:0px;"> <div style="float:left;height:148px;border:0px;"> <a href="http://www.earthwindwater.com.au" target="_blank"><img border=0 align="absmiddle" alt="Earth Wind and Water Sports Action Cameras" src="http://www.earthwindwater.com.au/banners/skiracersworld/EWW-logo.png" /></a> </div> <div style="height:148px;border:0px;float:right;padding-right:415px; "> <a id="imageurl" target="_blank" ><img id="Rotating1" id="imagealt" id="imagetitle" border="0"></img></a> <script language="JavaScript"> function RotateImages(Start) { var a = new Array("http://www.earthwindwater.com.au/banners/skiracersworld/Contour+.png","http://www.earthwindwater.com.au/banners/skiracersworld/LiquidImage.png","http://www.earthwindwater.com.au/banners/skiracersworld/ContourGPS.png", "http://www.earthwindwater.com.au/banners/skiracersworld/GoProHDHERO2.png"); var c = new Array("http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contour", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/impact-series-hd-1080p-mx-video-goggle-white", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contourgps", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/gopro-hd-hero2-motorsports-edition"); var e = new Array("Contour+", "Impact Series HD 1080p MX Video Goggle", "ContourGPS", "GoPro HD HERO2 Motorsport Edition"); var g = new Array("Contour+", "Impact Series HD 1080p MX Video Goggle", "ContourGPS", "GoPro HD HERO2 Motorsport Edition"); var b = document.getElementById('Rotating1'); var d = document.getElementById('imageurl'); var f = document.getElementById('imagealt'); var h = document.getElementById('imagetitle'); if(Start>=a.length) Start=0; b.src = a[Start]; d.href = c[Start]; f.alt = e[Start]; h.title = g[Start]; window.setTimeout("RotateImages(" + (Start+1) + ")",5000); } RotateImages(0); </script> </div> </div> Any ideas how I can get this to work I am very new to javascript. At least when it comes to writing scripts. The only thing I'm trying to do with the following script is make it so when you click on the right numbers of the image it will take you to a new page. If you click the wrong numbers it will forward you to an error page explaining that the code/numbers you clicked on were wrong. The code of numbers is four numbers long. When I try the correct numbers or the incorrect numbers nothing happens either way. I'm not sure why. Code: <html><head><title>Untitled</title> <script type="text/javascript"> var combination; var comboAnswer = "7256"; combination = ""; function keycode(n) { if (combination.length < (opener.top.comboAnswer.length - 1)) { combination = combination + n; } else { combination = combination + n; checkCode(); } } function checkCode() { if (combination == opener.top.comboAnswer) { window.location.href = "disarmed.html"; } else { window.location.href = "armed.html"; } } </script> <body bgcolor="#000000"> <center> <div style="text-align:center; width:527px; margin-left:auto; margin-right:auto;"> <img id="combination" src="image.png" usemap="#combination" border="0" alt="" /> <map id="_combination" name="combination"> <area shape="rect" coords="255,184,288,210" href="javascript:keycode(1)" alt="" title="" /> <area shape="rect" coords="288,184,321,210" href="javascript:keycode(2)" alt="" title="" /> <area shape="rect" coords="321,184,354,210" href="javascript:keycode(3)" alt="" title="" /> <area shape="rect" coords="255,213,288,239" href="javascript:keycode(4)" alt="" title="" /> <area shape="rect" coords="288,213,321,239" href="javascript:keycode(5)" alt="" title="" /> <area shape="rect" coords="320,213,353,239" href="javascript:keycode(6)" alt="" title="" /> <area shape="rect" coords="256,240,289,266" href="javascript:keycode(7)" alt="" title="" /> <area shape="rect" coords="288,240,321,266" href="javascript:keycode(8)" alt="" title="" /> <area shape="rect" coords="320,240,353,266" href="javascript:keycode(9)" alt="" title="" /> <area shape="rect" coords="288,265,321,291" href="javascript:keycode(0)" alt="" title="" /> <area shape="default" nohref> </map> </div> </center> </body></html> I am very new to learning JavaScript and I already seem to have come across a problem. I can get Scripts to work fine in the <body> but not all scripts seem to work in the <head> For example, this works fine: Code: <html> <body> <p id="date"></p> <script type="text/javascript"> <!-- document.getElementById('date').innerHTML = Date(); //--> </script> </body> </html> However, it won't work if I place the script in the head like this: Code: <html> <head> <script type="text/javascript"> <!-- document.getElementById('date').innerHTML = Date(); //--> </script> </head> <body> <p id="date"></p> </body> </html> It could just be that I broke one of the fundamental laws of coding that I don't know or something but like I said, I've only just started JavaScript. Also, the tutorial I have isn't to clear on the differences between using the <head> or the <body>. Just kinda says you can do both. I'd like to use the <head> wherever possible because it would be so much neater to keep all the JavaScript in one place and all the HTML in another. Pretty much like you can do with CSS. Anyway, I'd be much grateful if somebody can explain this to me. |