JavaScript - Don't Make Functions Within A Loop. Error From Jslint
I am working on a site and in the process borrowed some js from some one to get dropdown menus to work, but after a while got reports from people who tested my site of some problems and decided to verify all my code, and i have fixed most bugs but the one listed in the title.
Code: sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; }; sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); }; } }; if (window.attachEvent) {window.attachEvent("onload", sfHover);} and i am verifying it on jslint the error i get is: Quote: Error: Problem at line 6 character 10: Don't make functions within a loop. }; Problem at line 9 character 10: Don't make functions within a loop. }; Implied global: sfHover 1,12, document 2, window 12 any help will be appreciated, and I'm sure this isn't complex but i don't know much js and want to keep it the same. Similar TutorialsHere is sampling from a JSLinting of one "core" js file, with some requests for help ... (Btw it runs OK on my machine and is IE only to work with Sketchup web dialogs) Code: Problem at line 15 character 5: 'window' is not defined. window.location = "skp:" + callback + "@" + params.join(';'); This seems very odd to me; surely it cannot be bad! Code: Problem at line 29 character 9: 'nameDown' is not defined. nameDown(params); nameDown is a function in another file; any problem with that? There will be other similar calls. Code: Problem at line 103 character 65: Be careful when making functions within a loop. Consider putting the function in a closure. o.onmousedown = function() { coreDown(this , c , dv ); }; This one is more difficult. Here is the relevant part of the function: Code: // o is a div o.className = p + cn; o.onmousedown = function() { coreDown(this , c , dv ); }; s = o.style; s.width = "100%"; s.height = ch; Is the recommendation relevant, possible? Code: Problem at line 141 character 5: Bad line breaking ... ,interval); in this code (Actually my last thread here) Code: function coreAnimate(obj, elm, begin, end, duration, fps) { var change,interval,steps,i; change = end-begin; interval = Math.ceil(1000/fps); steps = Math.ceil(duration/interval); if(obj.coreStop){ window.clearInterval(obj.coreStop); } i = 0; obj.coreStop = window.setInterval( function() { obj.last = linearTween(i, begin, change, steps); obj.style[elm] = obj.last + 'px'; i+=1; if (i > steps){ window.clearInterval(obj.coreStop); } } ,interval); } It certainly does not look good but is it bad? Code: Problem at line 148 character 14: 'ActiveXObject' is not defined. fs = new ActiveXObject("Scripting.FileSystemObject"); I guess this is the same as window as noted in the last bit of the report: Code: Implied global: window 7,15,130,133,139, nameDown 29, Refresh 63, ActiveXObject 148,162,171 Any help and suggestions gratefully received. Chris Is it possible to make a variable available to other functions outside a function So to make it global from within a function without using a callback Code: function() { var something = 'hello'; } function(something) { document.write(something); } something like that possible?? JSLint doesn't like this script. Code: document.getElementById('mypic').src=pics[this.number]; if(disc[this.number]!='') { imge=document.createElement('img'); imge.setAttribute('src',disc[this.number]); suggest for line two to use == or === [JavaScript] lint warning: comparisons against null, 0, true, false, or an empty string allowing implicit type conversion (use === or !==) Can anyone help me with this. I am out of my depth. Thanks in advance. Frank Hi! I'm as new as they come when it deals with website development but forums have been useful to me in the past and I'm hoping I can get some kind of direction from all the wonderful people on this forum! I have an idea for a website that I'd like to pursue, and it would need functions such as: -Live news feed -Member logins, profiles, ability to rate/leave feedback for members -Mobile phone friendly -Comment on postings -Create an intro video (maybe even with animated stick figures to explain how the site works) -Accept paypal or other payment method -And basically, need to understand the monthly maintenance cost of all these functions, how to minimize expenses, etc. I know it seems far fetched for a newbie! But I need to know if this is possible.. how would I begin implementing a site like this.. Do I need to find a programmer to code it from scratch? Are there pre-written scripts available for all the functions I listed? What can I expect the costs to be? What's the best way to move forward? Validator (My CSE HTML Validator v9.0 ) reports javascript errors but program runs. There seems to be a problem with commands used twice and a missing semi-colon. Also there are problems with Firefox. Unable to reselect another image. OK with IE8. I would appreciate it if someone with better eyesight than me could give the jscript a once over for me. Thanks oin advance. Frank Culprit is here. EDITED. I need the rolling and the displaying in a loop and i am clueless. If anyone could help it would be much appreciated. <html> <head> <title> Die Rolls </title> <script type="text/javascript" src="http://balance3e.com/random.js"> </script> <script type="text/javascript"> function RollDice() { var roll1, roll2, roll3, roll4, roll5; roll1 = RandomInt(1, 6); roll2 = RandomInt(1, 6); roll3 = RandomInt(1, 6); roll4 = RandomInt(1, 6); roll5 = RandomInt(1, 6); document.getElementById('die1Img').src = 'http://balance3e.com/Images/die' + roll1 + '.gif'; document.getElementById('die2Img').src = 'http://balance3e.com/Images/die' + roll2 + '.gif'; document.getElementById('die3Img').src = 'http://balance3e.com/Images/die' + roll3 + '.gif'; document.getElementById('die4Img').src = 'http://balance3e.com/Images/die' + roll4 + '.gif'; document.getElementById('die5Img').src = 'http://balance3e.com/Images/die' + roll5 + '.gif'; document.getElementById('rollSpan').innerHTML = parseFloat(document.getElementById('rollSpan').innerHTML) + 1; } </script> </head> <body bgColor="lime"> <div style="text-align:center"> <p> <img id="die1Img" alt="die image" src="http://balance3e.com/Images/die1.gif"> <img id="die2Img" alt="die image" src="http://balance3e.com/Images/die2.gif"> <img id="die3Img" alt="die image" src="http://balance3e.com/Images/die3.gif"> <img id="die4Img" alt="die image" src="http://balance3e.com/Images/die4.gif"> <img id="die5Img" alt="die image" src="http://balance3e.com/Images/die5.gif"> </p> <input type="button" value="Click to Roll" onclick="RollDice();"> <hr> <p> Number of rolls: <span id="rollSpan">0</span> </p> </div> </body> </html> Hi, I have this loop: Code: for (var j = 0; j < gmarkers.length; j++) { gmarkers[j].hide(); elabels[j].hide(); map.closeInfoWindow(); var str=gmarkers[j].myname.toLowerCase(); var patt1=inp; if (str.match(patt1)) { found = true; gmarkers[j].show(); count++; var p=j; } } which was useful for passing the p variable when it was just one number. but now I need to get that number every time j gets set (I understand that the j gets overwritten each time the loop goes through). What would be ideal is if p could become an array, the contents of which match the values that j has passed though during the loop cycle. I thought var p = new Array (j); minght do the trick, but obviously not... I hope that I'm explaining it OK, and that it's possible, and that somebody has an idea how to do it... I am trying to display some images in, say, 500ms intervals, but I want to loop through images, so I use a for loop and setTimeouts and function calls... Code: for (i=0;i<=5;i++) { setTimeout(DisplayTheImage, 500); } (a var that increments the image like image[x] is somewhere else) but I think all I accomplish is that while the above code calls the function 5 times alright, all five function calls occur simultaneously. Right? Eh, I want the function to be called 5 times, but at five different times, namely in 500ms intervals. I thought the function would wait to finish (500 ms) then another call and so on. How can I do that? Hi, I have written a number of functions designed to return frequency data on 1000 randomly chosen numbers using different math functions for the rounding. I would like to include all of these functions within the wrapper of another function so that only one call is needed to get returns from all of the 'inner' functions. However, while each of the functions works in isolation, the moment I wrap them in another function they stop working. The following code is one of the functions 'frequencyWrapperOne' that has been wrapped in the function 'testWrapper'. A call to testWrapper does nothing. Can anyone see what I'm doing wrong? Code: function testWrapper() { function frequencyWrapperOne() { var numberArrayOne = new Array(0,0,0); for (var i = 0; i < 1000; i = i + 1) { var chosenNumber = Math.floor(Math.random() * 3); if (chosenNumber == 0) { numberArrayOne[0] = numberArrayOne[0] + 1; } if (chosenNumber == 1) { numberArrayOne[1] = numberArrayOne[1] + 1; } if (chosenNumber == 2) { numberArrayOne[2] = numberArrayOne[2] + 1; } } return window.alert(numberArrayOne.join(',')); } } testWrapper(); Thanks. First post here so... I have a few functions called by a form. Two examples are onclick in a form input and onkeyup in a form button. Code: function checkUsernameForLength(whatYouTyped) { var fieldset = whatYouTyped.parentNode; var txt = whatYouTyped.value; if (txt.length > 2) { fieldset.className = "welldone"; return true; } else { fieldset.className = ""; return false; } } Code: onkeypress="checkUsernameForLength(this);" There are a couple of the above "validation" functions. Each sets an input fieldset's class. Code: function verifyit() { var fieldsets = document.getElementsByTagName("fieldset"); var i=0; while (i<count(fieldsets)){ if (fieldsets[i] != "") { i++; document.form.submit(); } } } Code: onclick="verifyit()" The function above is where I'm having the trouble. I want to iterate through the fieldsets and make sure each class isn't blank before allowing the button to submit the form. I get an "object expected" error when I trigger the "verifyit" function with ie if it helps. I appreciate any input, thanks in advance for any help. Is there a way to activate a function from another function? It has to be in the script tag, it can't be in the HTML section. Can I use something similar to this following code? If not, can anyone give me some help? I have tried to do it various ways, and have looked it up a few times, but to no avail. Can I use something similar to this following code? If not, can anyone give me some help? if (condition) {activate functionname();} Any help I can get would be appreciated. Thanks a lot to anyone who can help. Ok here is what I have so far, my ending part of my Call Function I think is ok. for my main function. I think I misplaced the { and } I will show you all the codes I have for my main function this is what I have I think I did misplace something but I can not pin point where that one small things should be Code: unction showResults(race,name,party,votes) { // script element to display the results of a particular race var totalV = totalVotes(votes); document.write("<h2>" + race + "</h2>"); document.write("<table cellspacing='0'>"); document.write("<tr>"); document.write("<th>Candidate</th>"); document.write("<th class ='num'>Votes</th>"); document.write("<th class='num'>%</th>"); document.write("</tr>"); } for (var i=0; i < name.length; i++) { document.write("<tr>"); document.write("<td>" name[i] + "(" + party[i] + ")</td>"); document.write("td class='num'>" + votes[i] + "</td>"); var percent=calcPercent(votes[i], totalV) document.write("<td class='num'>(" + percent +"%)</td>"); createBar(party[i],percent) document.write("</tr>"); } document.write("</table>"); } </script> Just wondering if i misplaced any ; or { or } anywhere suggestions? Here is my call function Code: <script type="text/javascript"> showResults(race[0],name1,party1,votes1); showResults(race[1],name2,party2,votes2); showResults(race[2],name3,party3,votes3); showResults(race[3],name4,party4,votes4); showResults(race[4],name5,party5,votes5); </script> I been going over this, I can not seem to figure out what { i might be missing? Thanks Ok, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together. What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array. What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created. Here is the test object: Code: test = [ { "name" : "Menu 1", "url" : "menu1.html", "submenu" : [ { "name" : "menu 1 subitem 1", "url" : "menu1subitem1.html" }, { "name" : "menu 1 subitem 2", "url" : "menu1subitem2.html" } ] }, { "name" : "Menu 2", "url" : "menu2.html", "submenu" : [ { "name" : "menu 2subitem 1", "url" : "menu2subitem1.html" }, { "name" : "menu 2subitem 1", "url" : "menu2subitem1.html" } ] }, { "name" : "Menu 3", "url" : "menu3.html", "submenu" : [ { "name" : "menu 3 subitem 1", "url" : "menu3subitem1.html" }, { "name" : "menu 3 subitem 1", "url" : "menu3subitem1.html" } ] } ]; Here is the recursive function: Code: function buildMenuHTML(menuData,level) { var ul; if (level == 1) { ul = "<ul id='menu'>"; } else { ul = "<ul class='level" + level + "'>"; } for (i = 0; i < menuData.length; i++) { menuItemData = menuData[i]; ul += "<li>"; ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>"; if (typeof menuItemData.submenu != 'undefined') { ul += buildMenuHTML(menuItemData.submenu,level + 1); } ul += "</li>"; } ul += "</ul>"; return ul; } Here is how the function is called initially: Code: buildMenuHTML(test,1); This is it's return value (with indentation added for readability): Code: <ul id='menu'> <li><a href='menu1.html'>Menu 1</a> <ul class='level2'> <li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li> <li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li> </ul> </li> </ul> 'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated. Hi all I'm well aware that I can't post assignments here and expect an answer, however, I have been staring at this code for so long. I feel I am close to the solution (to get the correct output to the browser) but I just cannot get it to count how many moves it takes. I don't want an answer, but a nudge in the right direction would be very grateful. As you can see from the code and the output, it will attempt to write to the browser how many moves, but only '0'. Code: function rollDie() { return Math.floor(Math.random() * 6) + 1; } /* *searches for a number in a number array. * *function takes two arguments * the number to search for * the number array to search *function returns the array index at which the number was found, or -1 if not found. */ function findIndexOf(number, numberArray) { var indexWhereFound = -1; for (var position = 0; position < numberArray.length; position = position + 1) { if (numberArray[position] == number) { indexWhereFound = position; } } return indexWhereFound; } //ARRAYS that represent the board -- you do not need to change these //array of special squares var specialSquaresArray = [1,7,25,32,39,46,65,68,71,77]; //array of corresponding squares the player ascends or descends to var connectedSquaresArray = [20,9,29,13,51,41,79,73,35,58]; //VARIABLES used -- you do not need to change these //the square the player is currently on var playersPosition; //play is initially at START playersPosition = 0; //what they score when they roll the die var playersScore; //the index of the player's position in the special squares array or -1 var indexOfNumber; //MAIN PROGRAM //TODO add code here for parts (iii), (iv)(b), (v), and (vi) // start of question(iii) playersScore = rollDie(); document.write(' Sco ' + playersScore); playersPosition = playersScore + playersPosition; document.write(', Squa ' + playersPosition); indexOfNumber = findIndexOf(playersPosition, specialSquaresArray); if (indexOfNumber != -1) { document.write(', Ladder to Squa ' + connectedSquaresArray[indexOfNumber]); playersPosition = connectedSquaresArray[indexOfNumber]; indexOfNumber = -1; } document.write('<BR>') // end of question(iii) // start of question(iv)(b) while(playersPosition<=80) { playersScore = rollDie() document.write(' Sco ' + playersScore) playersPosition = playersPosition + playersScore document.write(', Squa ' + playersPosition) indexOfNumber = findIndexOf(playersPosition, specialSquaresArray) if(indexOfNumber != -1) { document.write(', Ladder to Squa ' + connectedSquaresArray[indexOfNumber]); playersPosition = connectedSquaresArray[indexOfNumber]; } document.write('<BR>'); } var countMoves = 0; while(countMoves <= 0) { document.write('You took ' + countMoves + ' moves to get out'); countMoves = countMoves + 1 } /*for (var countMoves = 0; countMoves < playersPosition; countMoves = countMoves + 1) { countMoves = countMoves + playersPosition; document.write('You took ' + countMoves + ' moves to get out'); }*/ // end of question(iv)(b) // start of question (v) /*if (playersPosition >=80) { document.write('The player is out'); }*/ // end of question (v) </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Many thanks. Hello... Thanks for reading... I am getting an undefined error when i try to get a value from this array in the interior loop... Code: // This is the array I am trying to access AuditTable [0] = ["Visio Modifed date","Word Modified Date","User Status","User Comment","Last Audit","Audit Status","Audit Comment"] AuditTable [1] = ["11/23/2009 8:52:18 AM","missing","OK","user comment number 1","1/1/2009","ok","audit comment number 1"] AuditTable [2] = ["11/24/2009 12:21:19 AM","missing","Out of Date","Changes from 2008 not implemented","1/2/2009","Out of Date","needs update"] AuditTable [3] = ["11/22/2009 9:24:42 PM","missing","Incomplete","Document doesnt cover all possibilities","1/3/2009","Inadequate","needs update"] I have hard coded values and had success such as: Code: data = AuditTable[1][0] But when I put the vars associated with the loop in I get an undefined error - AuditTable[i] is undefined: Code: // produces error data = AuditTable[i][j] //Works but retrieves wrong data data = AuditTable[j][i] //Works but retrieves wrong data data = AuditTable[1][i] //Works but retrieves wrong data data = AuditTable[j][2] I must be trying to access the array incorrectly or something... I have defined all the vars, and tried many combinations, alerted the values of both vars so I can prove it is not a scope issue... Am I missing something obvious? Thanks much... Code: var reportArray=new Array(); var reportData, title, subTitle, data; for(i in parmarray)// loop thru AuditTable array and get values { title = '<div style="font-family:verdana; font-size:14px; font-weight:bold; margin:25px 0px 5px 30px">'; title += namearray[i][0]; title += '</div>'; reportArray.push(title);//Take compiled variable value and put it into array for(j=0; j < AuditTable[0].length; j++)// loop thru AuditTable array and get values { subTitle = AuditTable[0][j];//points to first row of AuditTable where the labels are data = AuditTable[1][0];//points to the current row where actual data is html = i + j +'<div style="font-family:verdana; font-size:12px; color:#696969; font-weight:bold; margin-left:30px;">'; html += subTitle; html += '</div><div style="font-family:verdana; font-size:12px; color:#a9a9a9; margin-left:30px; margin-bottom:10px">'; html += data; html += "</div>"; reportArray.push(html);// put results into array } } it wont loop, as long as you enter something in the name field it will submit. also how do i stop from submitting if all fields are not filled out? any help will be appreciated) ====== function checkForm(form) { var len = form.elements.length; var h=0; for (h=0; h<=len; h++){ if ((form.elements[h].value==null) || (form.elements[h].value=="")){ alert("Please enter "+document.myForm.elements[h].name); document.myForm.elements[h].focus(); return false; } return true; } } ===body-== <FORM NAME="myForm" METHOD="post" ACTION="http://ss1.prosofttraining.com/cgi-bin/process.pl"> Name:<BR> <INPUT TYPE="text" size="30" NAME="name"><br> Email address:<BR> <INPUT TYPE="text" size="30" NAME="email address" onBlur="emailTest(this);"><br> Phone number:<BR> <INPUT TYPE="text" size="30" NAME="phone number"><br> Fax number:<BR> <INPUT TYPE="text" size="30" NAME="fax number"><p> <INPUT TYPE="submit" VALUE="Submit Data" onClick="return checkForm(this.form);"> <INPUT TYPE="reset" VALUE="Reset Form"> </FORM> Hi, I am doing some studying and we was to create a small loop using either the for loop, while loop or do while loop. I chose to do the for loop because it was easier to understand, but I want to know how to do the same using the while loop. Here is the for loop I have, but I cant figure out how to change to while loop. Code: for (var i = 0; i < 5; ++i) { for (var j = i; j < 5; ++j) { document.write(j + ""); } document.write("<br />"); } output is equal to: 01234 1234 234 34 4 How do you make the same using a while loop? . Why do we have functions without parentheses at times? Ex 1) http://www.youtube.com/watch?v=OHYFNDzlDTE (On 2:18) Ex 2) At the bottom: Code: var panel, flag; function mousemoveResponse(e) { var x, y; if( window.event ) { x= event.x; y=event.y; } else if(e) { x=e.pageX; y=e.pageY; } if(flag) { panel.innerHTML = "Mouse is at X: " + x + ", Y: " + y ; } } function mouseoverResponse() { flag = false; panel.innerHTML = "Mouse is Over"; } function mouseoutResponse() { flag = true ; } function init() { panel=document.getElementById("panel"); flag = true; panel.innerHTML="Move the mouse..." ; document.onmousemove=mousemoveResponse; panel.onmouseover=mouseoverResponse; panel.onmouseout=mouseoutResponse; } onload=init; I need to input the functions for the buttons ( Push, Pop,Peek, Enqueue, and Dequeue) nothing I try works. Can anyone possible help me with one of the push, pop or peek, and then one of the Enqueue or Dequeue (any information I see online always has to do with wordpress which im not using) . Im really not asking for someone to do all the work for me, I just need a start. ok here is my code with the buttons just no functions <html> <head> <title>COP2500 - Lab 9</title> </style></head> <body> <center> <h3><b>COP2500 Assignment 9</b></h3> <b>Queue:</b> <form name="queue"> <input type=text size=60 name="display"><br> <input type=text size=5 name="entry"> <input type=button value="Enqueue" onClick="enqueue()"> <input type=button value="Dequeue" onClick="dequeue()"> </form> <hr> <b>Stack:</b> <form name="stack"> <table> <tr> <td>Entry: <input type=text size=5 name="entry"><br> <input type=button value="Push" onClick="push()"><br> <input type=button value="Pop" onClick="pop()"> <br> <input type=button value="Peek" onClick="peek()"><br> </td> <td><textarea name=display rows=20></textarea></td> </tr> </table> </form> </center> <script language="JavaScript"> var myqueue = new Array(); var front; var back; front = 0; back = -1; var mystack = new Array(); var top; top = -1; function enqueue() { // This function should take the value from the 'entry' text box and // add it to the back of the queue. The 'back' queue variable must be // incremented. // Since the queue changed, call the display function. Done. display_queue(); } function dequeue() { // This function should display the value of the 'front' element // in the queue using the 'alert' function and then increment the value // of the front variable. // if the queue is empty, i need to say so. // Since the queue changed, call the display function. Done. display_queue(); } function push() { // This function should add the value in the 'entry' text box to the stack, // and then increment the value of the 'top' variable. // Since the stack changed, call the display function. . display_stack(); } function pop() { // This function should use the alert function to display the top // of the stack and then remove the top item from the stack. // You can 'remove' the item simply by decrementing the value of 'top'. // If the stack is empty, it needs to say so. // Since the stack changed, call the display function. . display_stack(); } function peek() { // This function should use the 'alert' function to display the top // of the stack but not change the stack. If stack is empty,it needs to say so. } // ***************************************************************** // Do not edit anything below this line. Use the functions as given. // ***************************************************************** function display_queue() { var output; var i; output = " "; for (i = back; i >= front; i--) output = output + myqueue[i] + " "; document.queue.display.value = output; } function display_stack() { var output; var i; output=""; for (i = top; i > -1; i--) output = output + mystack[i] + "\n"; document.stack.display.value = output; } </script> </body> </html> |