JavaScript - Onclick="document.getelementbyid Problems
I'm at a complete loss as too what or where i've missed something. i only included 2 models out of the 1000's that will have pages like this...i should also note that will be shown in an iframe..don't know if that really makes a diference tho hope someone can figure out what i've missed
Code: <script language="javascript"> top.document.reset.RefCat.value="Television"; top.document.reset.NarrowRef.value="Good"; top.document.reset.criteria.value="KD"; top.document.reset.searchscope.value=""; top.document.reset.companyscope.value=""; top.document.reset.company.value=""; if(""==""){top.reset();} function popUp(URL,Name) { var day = new Date(); var id = "page" + Name; window.open(URL, id, "toolbar=1,scrollbars=1,location=0,statusbar=1, menubar=0,resizable=1,width=600,height=600"); } function launchjsmanuals(flag, x, y, z, id) { //var myTypeLib = new ActiveXObject("Scriptlet.Typelib"); //var GUID = new String(myTypeLib.guid).substr(1,8); //var endguid = new String(myTypeLib.GUID).substr(25,10); if((x.indexOf("CHM")!=-1) || (x.indexOf("chm")!=-1)){ alert("You will be prompted to download a file\n\nClick Open - Do NOT click Save"); } var whnd = "page" + id; //+ GUID + endguid; var URL = 'philips.asp?flag='+flag+'& manual=' + x + '&user=' + y + z + '&manualid=' + id; if(flag!=""){ whnd = window.open(URL,whnd, "toolbar=0,scrollbars=1,location=0,statusbar=0, menubar=0,resizable=1,width=560,height=600"); }else{ whnd = window.open(URL,"Loader", "toolbar=0,scrollbars=1,location=0,statusbar=0, menubar=0,resizable=1,width=560,height=600"); } } function NarrowSearch(what,value,cat){ switch(what){ case "Model": if("Television"!=""){ parent.document.SearchForm.RefCat.value="Television"; } parent.document.SearchForm.criteria.value=value; parent.document.SearchForm.searchscope.value="model"; parent.document.SearchForm.NarrowRef.value="Good"; parent.document.SearchForm.submit() break; </script> </head> <body> <div id="results"> <table border=0 cellpadding=0 cellspacing=2><tr><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','KDLV40A10',' Television')"><b>KD</b>LV40A10</a></td> <td width=15px></td><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','KDLV40XBR1',' Television')"><b>KD</b>LV40XBR1</a></td> <td width=15px></td></tr></table</div></div></div></table> <!-- <FORM NAME="displayaction" ACTION="directview.asp" METHOD="POST" target="_salert"> --> <FORM NAME="displayaction" ACTION="_directview.asp" METHOD="POST" target="_salert"> <INPUT type="hidden" name="id" value=""> <INPUT type="hidden" name="actionurl" value=""> <INPUT type="hidden" name="modelnum" value=""> </form> <iframe name="Loader" id="Loader" src="blank.htm" style="display:none;height:150px; width:100%;border:1px solid silver"></iframe> <a onclick="document.getElementById('Loader').style.display='';">*</a> <script language="javascript"> //alert(parent.IQ.location.href); </script> </body> </html> Similar Tutorialsi have an onclick function, but after debuging i found that firefox and only firefox blocks at the line " individualNames = names.childNodes[0].innerText; " is there somthin im missing please help. function searchForm() { var change = 0; var searchValue = document.getElementById("searchValue").value.toLowerCase(); var count = document.getElementById("excelTable").rows.length; var once = true; myArray = new Array(); if(searchValue == ""){alert("Please enter a value"); return false} for(i=0;i<=count;i++){ names = document.getElementById("excelTable").rows[i]; individualNames = names.childNodes[0].innerText; //only by last name of the file coming in format == "LastName, FirstName" lastName = individualNames.split(", "); //only by last name lowerCaseNames = lastName[0].toLowerCase(); names.style.backgroundColor = "#FFF"; if(lowerCaseNames.indexOf(searchValue) != -1) { names.style.backgroundColor = "#999"; //make the first result with the search apear on screen than stop after the first if(once==true){document.getElementById("excelTable").rows[i].scrollIntoView(true); once=false;} myArray[change] = document.getElementById("excelTable").rows[i];//fill a passing array to next function change++;//make the array go to next slot document.getElementById("nextButton").disabled = false; document.getElementById("searchTitle").scrollIntoView(true); } } } Quote: <html> <head> <script type="text/javascript"> var a = january var b = febuary var c = march function test() { document.getElementById("test").innerHTML=a; <!-- needs to be A on first function click, b on second, c on third, etc..^^--> } </script> </head> <body> <p id="test"></p> <!-- the <p> should go to next month upon each function --> <input type="button" value="asdf" onclick="test()" /> </body> </html> I tried to explain it pretty well in the comment tags, thanks! Hi guys, i m novice to javascript, i have a piece of code to preview the image after selecting it from file upload control,its working fine in Firefox,but its not working in IE,Chorome,what is the error please let me know,here is my code. function setImage(file) { if (document.all) document.getElementById("<%=prevImage.ClientID %>").src = file.value; else document.getElementById("<%=prevImage.ClientID %>").src = file.files.item(0).getAsDataURL(); if (document.getElementById("<%=prevImage.ClientID %>").src.length > 0) document.getElementById("<%=prevImage.ClientID %>").style.display = 'block'; } I'm getting the following problem. The reason is that the object appears through AJAX. But if I choose it NOT to appear it gives this problem. How can I avoid this? I put an if statement inline Code: if(document.getElementById('vsbtitle_1').value!=null){ thisurlext+='&btitle1='+document.getElementById('vsbtitle_1').value; } But it doesn't help. Quote: Error: document.getElementById("vsbtitle_1") is null Source File: javascript:%20var%20file='forforum.php';%20var%20thisurlext='?type=forforum&btitle0='+document.getEl ementById('vsbtitle_0').value;%20if(document.getElementById('vsbtitle_1').value!=null){thisurlext+=' &btitle1='+document.getElementById('vsbtitle_1').value;%20}%20var%20checkedlength=0;%20thisurlext+=' &checkresult0=';%20for(i=0;i<document.getElementsByName('checkresult_0').length;++i){if(document.get ElementsByName('checkresult_0')[i].checked){thisurlext+=document.getElementsByName('checkresult_0')[i].value;checkedlength++;if(i+1<document.getElementsByName('checkresult_0').length){if(document.getEle mentsByName('checkresult_0')[i+1].checked){thisurlext+='+';}}}};%20thisurlext+='&checkresult1=';%20for(i=0;i<document.getElementsByNa me('checkresult_1').length;++i){if(document.getElementsByName('checkresult_1')[i].checked){thisurlext+=document.getElementsByName('checkresult_1')[i].value;checkedlength++;if(i+1<document.getElementsByName('checkresult_1').length){if(document.getEle mentsByName('checkresult_1')[i+1].checked){thisurlext+='+';}}}};var%20getKeyURL='';%20for(a=0;%20a<document.getElementById('txtid').v alue;%20a++){if(document.getElementById('txtarea_'+[a]).value!=%20''){getKeyURL+='&txtarea'+[a]+'=';}getKeyURL+=document.getElementById('txtarea_'+[a]).value;}var%20thisnewurlext=file+thisurlext+getKeyURL;%20forForum(); Line: 1 Hey all, For the below code, I'm just trying to create a simple toggle menu for a Table of Contents. However, when page loads, I get document.gelementbyid('sidebar') is null even though it's clearly there and if I move script to below markup, it will also give me a hideElements() is not a function error, even though it clearly is. Code: <script type="text/javascript"> (function(){ var headers = document.getElementById("sidebar").childNodes; for(var i=0; i < headers.length; i++){ hideElements(headers[i]); if(headers[i].nodeName == "h1"){ headers[i].childNodes[0].onclick = function(){ hideElements(headers[i]); this.parentNode.nextSibling.style.display = "block"; return false; } } } var hideElements = function(element){ if(element.nodeName == "UL") element.style.display = "none"; } })(); </script> <body> <a name="top"></a> <div id="masthead"> <h1>This is the Help Page</h1> </div> <div id="sidebar"> <h1><a href="chapter1"> Info</a></h1> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ul> <h1><a href="chapter2"> Info</a></h1> <ul> <li><a href="#section4">Section 4</a></li> <li><a href="#section5">Section 5</a></li> <li><a href="#section6">Section 6</a></li> </ul> </div> <div id="content"> <h1 id="section1">Section 1</h1> <p> </p> <a href="#top">Back to Top</a> <h1 id="section2">Section 2</h1> <p> </p> <a href="#top">Back to Top</a> <h1 id="section3">Section 3</h1> <p> </p> <a href="#top">Back to Top</a> </div> </body> Thanks for any response. My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE> <META content="text/html"; charset="UTF-8" http-equiv="content-type"> <SCRIPT type="text/javascript"> function createTable(){ var Etudiant = new Array(Number(prompt("How many Students will you put in ?",""))); document.write("<table border=\"1\">"); for (var i=0; i<Etudiant.length; i++) { Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","") alert("Nice to see you "+Etudiant[i]); document.write("<td>"+Etudiant[i]+"</td>"); j = parseInt(prompt("Combien de notes voulez vous calculez ?")); for (h=0;h<j;h++){ notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i])); document.write("<td>"+notes[h]+"</td>"); } document.write("<tr>"); } document.write("</tr>"); document.write("</table>"); document.getElementById('monTab').innerHTML=Etudiant; } </script> <BODY> <H1>Combien de note voulez vous cumulez ?</H1> <br> <br> <input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()"> <div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div> </BODY> </HTML> Why fail? --> <span onclick="document.bgColor = 'grey';">Grey</span> <span onclick="document.bgColor = 'grey';">Grey</span> does not change the page grey on this page: u s e r s (dot) r c n (dot) c o m / r o b e r t (dot) a c k e r t / g r e y . h t m any ideas why? I think something is blocking it. I am writing some javascript that when the user clicks on a link, it hides or displays content inside a div tag. I have been trying to add some code that would only allow for one div tag to be displayed at a time. Here is where I originally got the code (http://www.willmaster.com/library/hi...-to-reveal.php) Whenever I run this code I get this error: Code: Error: document.getElementById(months[x]) is null Source File: /resources/default.js Line: 30 This is the JavaScript that runs when the user clicks the link: Code: <!-- function accordion(tid) { var x; var months = new Array(); months[0]="January"; months[1]="February"; months[2]="March"; months[3]="April"; months[4]="May"; months[5]="June"; months[6]="July"; months[7]="August"; months[8]="September"; months[9]="October"; months[10]="November"; months[11]="December"; for (x in months) { document.getElementById((months[x])).style.display = "none"; } if(document.getElementById(tid).style.display == "none") { document.getElementById(tid).style.display = ""; } else { document.getElementById(tid).style.display = "none"; }} //--> Here is where the javascript is activated from PHP Code: <a href=javascript:accordion('$month2');>$month2</a><br /> <div id='$month2' style='display: none';> Hello $month2 </div> I have a html file and a separate javascript file. The html file contains: <input type="reset" id = "resetButton" /> I want a message to pop up if the reset button is pressed. So in the js file I have: document.getElementById("resetButton").onclick = doAlert; doAlert is a function that simply does: alert("Do you want to reset?"); I know my separate js file is linked correctly because if I just put in alert("hello"); in the js file then it works. But if I use the document.getElementById thing in the js file, then there is an error. The error, according to the error console, says that "resetButton" is null. Can someone help me? thanks! btw, I'm totally new to programming...and I need to do this for my homework assignment What I'm trying to get are the tag ids separately after I call the callback function. I've been racking my brain for far too long on this one. Here is a shorter version of what I have. I'm using the array's length to count and break into their own lines. How do i get all 9 id="hover_[index]" separately using my array length? PHP Code: var info = Array("bla_1", "bla_2", "bla_3", "bla_4", "bla_5", "bla_6", "bla_7", "bla_8", "bla_9"); function callback(results, status) { if (status == myStatus) { for (var i = 0; i < results.length; i++) { send(results[i]); } } } function send(info) { document.getElementById('results').innerHTML += "<div id='hover_"+info.length+"'>Something</div>"; hover_target = document.getElementById('hover_'+info.length);// how do i get all 9 hover_[index] separately? someEvent.addDomListener(hover_target, 'mouseover', function() { // do something }); } Thank you so much in advance, Frank Hello all, I am trying to use document.getElementById in FF but its not working. There is a main page. in that mainpage there is a iframe and in that iframe (id = DocFrame) there is a textbox (id="fileuploadedcnt") which i am trying to access. there is no error. ofcourse i have given name and id to the textbox. Below is the code function ConfirmCertificate(id , Project_ID , Subprogram_ID , ITCType_TI) { frm=document.mainform; //fileuploadedcnt = (document.frames("DocFrame").document.forms("upload_form").elements("fileuploadedcnt").value); filecntobj = (document.getElementsByName("fileuploadedcnt")); filecntobj = (document.getElementById("fileuploadedcnt")); alert(fileuploadedcnt); alert((filecntobj.value)); return; if (fileuploadedcnt>0) { result=confirm("Are you sure you want to confirm this certificate? "); } In the abpve case i tried both the name and id properties. with Name property i get the HTMLObj alert but again it fails if i attach value method. And for id, it doesnt work at all No errors ofcourse in both the cases What am i missing Thanks I need help creating something hard. First I need to divs that change by ONE button and when they change they say two different things and must be onclick. The other thing is there will be 4 buttons. They start black and when you click one it turns grey and when you click another it turns gray and the other one that was last clicked turns back black and same with the other two. Hi ALL, I am validating a three form field which takes temperature value between 0-50, humidity 1-100 & rainfall 0-200. I am able to see expected result for temperature value but not getting correct value for humidity & rainfall(still one can insert text in it..) Here is my code-: Code: <script type="text/javascript"> function validate_form(thisform) { with (thisform) { if (validate_required(obdate,"Date must be filled out!")==false) { obdate.focus();return false;} } is_leaf_fresh = -1; for (i=0;i < thisform.is_leaf_fresh.length; i++) { if (thisform.is_leaf_fresh[i].checked == true) { //alert("coming into "+thisform.is_leaf_fresh[i].checked); is_leaf_fresh = 1; } } if ((is_leaf_fresh == -1)) { alert("You must select an option for Fresh Leaf!"); return false; } var temp_max; temp_max = document.getElementById("temperature_max").value; if (temp_max != '' ) { var numericExpression = /^[0-9]+$/; if(temp_max.match(numericExpression) && (temp_max>=0 && temp_max<=50)){ return true; } else{ alert("Max Temperature value should be Numeric & between 0 to 50"); document.getElementById("temperature_max").focus(); return false; } } var temp_min; temp_min = document.getElementById("temperature_min").value; if (temp_min != '' ) { var numericExpression = /^[0-9]+$/; if(temp_min.match(numericExpression) && (temp_min>=0 && temp_min<=50)){ return true; } else{ alert("Min Temperature value should be Numeric & between 0 to 50!"); document.getElementById("temperature_min").focus(); return false; } } var rainfall_mm; rainfall_mm = document.getElementById("rainfall_mm").value; if (rainfall_mm != '' ) { var numericExpression = /^[0-9]+$/; if(rainfall_mm.match(numericExpression) && (rainfall_mm>=20 && rainfall_mm<=50)){ return true; } else{ alert("Min Temperature value should be Numeric & between 20 to 50!"); document.getElementById("rainfall_mm").focus(); return false; } } var humidity_mm; humidity_mm = document.getElementById("humidity_mm").value; if (humidity_mm != '' ) { var numericExpression = /^[0-9]+$/; if(humidity_mm.match(numericExpression) && (humidity_mm>=20 && humidity_mm<=50)){ return true; } else{ alert("Min Temperature value should be Numeric & between 20 to 50!"); document.getElementById("humidity_mm").focus(); return false; } } } </script> Thanks in Advance!! Hello, I have a website that I need help with. You can visit it he http://www.shahspace.com/bow/home.html. To see what I need help with, click on the services menu item and observe the alert message that comes up. It should say "point 1". Here is the code that executes that: Code: function enableScrolling(menuName) { alert("point 1"); var menu = document.getElemenetById(menuName); alert("point 2"); ... } As you can see, there should be a second alert message that says "point 2", but there isn't. The script is crash when I try to assign to menu the object returned by document.getElementById(menuName). I have verified that menuName is correct. So why would this be crashing? To get a fuller understanding of my algorithm, I'll give you the following: The menu div: Code: <div id="services_menu" class="services_menu"> ... </div> The "services" button: Code: <td><a href="#" onclick="displayMenu('services'); return false;"><img src="services.jpg" border=0></a></td> The displayMenu() function: Code: function displayMenu(menu) { var menuName = menu + "_menu"; document.getElementById(menuName).style.display = "block"; if (itemCount(menuName) >= 12) { enableScrolling(menuName); } else { disableScrolling(menuName); } } The itemCount() function: Code: function itemCount(menuName) { var menu = document.getElementById(menuName); var divArray = menu.getElementsByTagName("div"); return divArray.length; } And the enableScrolling() function I already posted above. So essentially, when the user clicks on "service", the services menu becomes visible. If the menu contains 12 items or more, scrolling needs to be enabled. This entails setting the menu to a fixed height and allowing the user to scroll through it (scrolling, in this case, will be customized--I'm not using the div's native scrolling feature). The really odd thing is that in itemCount(), I have exactly the same line: var menu = document.getElementById(menuName); and it works fine there. Why not in my enableScrolling() function? Hi....I have an error in my script, but idk where it is..... here is the script: Code: <script type="text/javascript"> var browser = navigator.appName; if (browser=="Netscape") { document.getElementById(msg).style.display="none"; } </script> <div id="msg" style="width:100%;padding:3px;position:fixed;top:0px;left:0px;background:red;">Please install <a href="http://www.mozilla.org/sk/firefox/">Mozilla Firefox</a> to view this page normally.</div> I am trying to pass a value to a function autosuggest() f and i but i get the error... Message: Syntax error Line: 21 Char: 29 Code: 0 ajax_autocomplete2/ajax_search_for_airport_framework.js line 21 being q = ..... how do i correctly pass a value to the function and use it in the function to get the value of an element. Code: function autosuggest(f,i) { q = document.getElementById(f).value; .... } Hello everyone. As lame as this may sound, I can't for the life of me get the document by the id. All looks fine to me, but I get the following error that just simply doesn't make sense. Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Fri, 15 Jan 2010 01:37:06 UTC Message: Object required Line: 7 Char: 4 Code: 0 Here's the code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript"> function doSomething() { var elem = document.getElementById('doFade'); alert(elem.src); } window.onload = doSomething(); </script> </head> <body> <img src="/images/aero.jpg" id="doFade" width="300" height="200" /> </body> </html> Code: onload=function() {progress1();} var repeat=0; function progress1() { document.getElementById('clib').style.display="inline"; if (repeat<9) { repeat=repeat+1; setTimeout('progress1()',1000); old = document.getElementById('cliba').innerHML; document.getElementById('cliba').innerHML=old+'.'; } else { progress2(); } } var repeata=0; function progress2() { document.getElementById('wlib').style.display="inline"; if (repeata<23) { repeata=repeata+1; setTimeout('progress2()',1000); old = document.getElementById('wliba').innerHML; document.getElementById('wliba').innerHML=old+'.'; } else { progress3(); } } var repeatb=0; function progress3() { document.getElementById('dlib').style.display="inline"; if (repeatb<17) { repeatb=repeatb+1; setTimeout('progress3()',1000); old = document.getElementById('dliba').innerHML; document.getElementById('dliba').innerHML=old+'.'; } else { progress4(); } } var repeatc=0; function progress4() { document.getElementById('slib').style.display="inline"; if (repeatc<4) { repeatc=repeatc+1; setTimeout('progress4()',1000); old = document.getElementById('sliba').innerHML; document.getElementById('sliba').innerHML=old+'.'; } else { progress5(); } } var repeatd=0; function progress5() { document.getElementById('vlib').style.display="inline"; if (repeatd<17) { repeatd=repeatd+1; setTimeout('progress5()',1000); old = document.getElementById('vliba').innerHML; document.getElementById('vliba').innerHML=old+'.'; } else { progress6(); } } var repeate=0; function progress6() { document.getElementById('xlib').style.display="inline"; if (repeate<33) { repeate=repeate+1; setTimeout('progress6()',1000); old = document.getElementById('xliba').innerHML; document.getElementById('xliba').innerHML=old+'.'; } else { pyws(); } } var repeatf=0; function pyws() { document.getElementById('pyws').style.display="inline"; if (repeatf<7) { repeatf=repeat+1; setTimeout('pyws()',1000); old = document.getElementById('pywsa').innerHML; document.getElementById('pywsa').innerHML=old+'.'; } } HI.....idk why it is not working......when I load site, it will start counting, but dots after that .lib files.....look: http://ikoos.tk/load_os/ ......if you don't know what I mean....try to send me a PM. Thank you. i have the code in JS: Code: if(drop_list.value == "zed-catcher/11") { input_box.disabled=false; var catcher_id = document.getElementById('lpm_service_catcher_id'); catcher_id.value = 11; } else input_box.disabled=true; how come the line catcher_id.value = 11; is not setting the value to 11???? i get that catcher_id = null???? pleas help thanks here's my javascript code
Code: <script type="text/javascript"> function sel(id){ document.getElementById(id).className="selected"; var getEls = document.getElementById("countrytabs").getElementsByTagName("a"); var getAgn = getEls; for(var i=0; i<getEls.length; i++) { getEls[i].onclick=function() { for (var x=0; x<getAgn.length; x++) { getEls[i].className=getAgn[x].className.replace("selected", ""); } } } } </script> <style> a:hover {color: #FFFF00;} .selected{color: #FFFF00; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 15px; background-color: #ACAAAB; border: 0px none #ACAAAB; height: 20px; width: 125px; text-align: left;} a{color: #333333; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 15px; background-color: #ACAAAB; border: 0px none #ACAAAB; height: 20px; width: 125px; text-align: left;} </style> here's my html code Code: <a href="#" class="selected" id="one" onclick="sel('one')"> Bharati Axa </a><br /> <a href="#" id="two" onclick="sel('two')"> BPCL</a> <br /> <a href="#" id="three" onclick="sel('three')"> Hypercity </a><br /> <a href="#" id="four" onclick="sel('four')"> Idea </a> the problem is when i select a link the first time. it works fine. but when i select another link the next time the script does not work. Basically it works only once when page is loaded and then its not working at all. Its not showing any errors either. don't know whats happing.? Can someone please help me its urgent? Any help will be really gratefull! |