JavaScript - Changeimage: Problem With Eval Function
Hi,
i want a page with rotation of images, with fading. I'm trying with two images, but i see only the first image. Firebug console give me this error: Quote: $ is not defined: eval ('div =$("#focus_'+categoria+'")'); This is the entire code: Code: <script type="text/javascript"> array_img_2 = Array(); array_img_2[0] = 'PhpLib/../upload/2-Galleria/ima_galleria_03.gif'; array_img_2[1] = 'PhpLib/../upload/2-Galleria/ima_galleria_02.gif'; </script> <noscript>...</noscript> <div id="focus_2"> <a href="index.php?cp=4" title="vai alla gallery"> <img width="924" alt="immagini dei prodotti" src="PhpLib/../upload/2-Galleria/ima_galleria_03.gif" /></a> </div> <script src="PhpLib/jquery-1.2.6.min.js" type="text/javascript"> </script> <script type="text/javascript"> categories = Array(); categories[0]='2'; var numvisible_2 = 0; function changeImage(categoria){ var d = document; var aux = parseInt(eval('numvisible_'+categoria)); var array_img = eval('d.MM_'+categoria); if (array_img.length>1){ var img_index =(aux+1)%array_img.length; var div,img; eval ('div =$("#focus_'+categoria+'")'); eval ('img =$("#focus_'+categoria+' img")'); var control = "url('"+ array_img[img_index].src+"')"; $(div).css('background-image', control); $(img).animate({opacity:0.01},3000,function(){ this.src = array_img[img_index].src; $(img).animate({opacity:1},1000); }); eval ("numvisible_"+categoria+"=img_index"); } } function Init_Focus(){ var j; for (j=0; j<categories.length; j++) { var categoria = categories[j]; var array_img = eval('array_img_'+categoria); MM_preloadImages(array_img, categoria); setInterval("changeImage("+categoria+")",5000); } } function MM_preloadImages(img, categoria) { //v3.0 var d=document; eval("d.MM_"+categoria+"= new Array()"); var i,j=0; var a = img; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ eval("d.MM_"+categoria+"[j]=new Image"); eval("d.MM_"+categoria+"[j++].src=a[i]"); } } Init_Focus(); </script> Similar TutorialsHi - I wrote some code that uses the eval function. I am in the process of rewriting the code to improve on it where possible (a learning exercise). I have read that eval is evil because of security concerns and that the eval'd code is not compiled prior to runtime. I don't think my use of eval presents a security concern. However, I wonder if there is some way to replace the eval function with a more natural technique. I have done this using eval(); also using a new Function method. I have tried using a window[] method but I can't get that to work. OK, on the the actual code: The purpose of the javascript is to count keystrokes. I have a bunch of global counter variables declared in this fashion: Code: MyLib.CountQ=0; MyLib.CountW=0; MyLib.CountE=0; MyLib.CountR=0; MyLib.CountT=0; MyLib.CountY=0; MyLib.CountU=0; MyLib.CountI=0; MyLib.CountO=0; MyLib.CountP=0; When the Count function is called I want to update the appropriate counter. Thus: MyLib.Count'+varkeyname+'+=1; Where varkeyname is 'q' or 'w' or 'e' etc. Code: //MyLib is a global variable namespace. function Count() {//updates counters var varkeyname= specialchars(MyLib.KeyName);//identity of the key pressed. var stra="Count"+varkeyname;// string used to change an html value. //var strb=eval("MyLib.Count"+varkeyname+"+=1");//original eval function that worked just fine. var strb='return MyLib.Count'+varkeyname+'+=1';//string to update a counter. var myfunc= new Function(strb);//Function intended to replace the eval function - this also works just fine. document.getElementById(stra).value = myfunc(); ... You can see that I have replaced the eval function with another function - but since this is also not compiled prior to runtime I don't think this is an improvement. I have read about using the window[string] method but I can't get it to work. This is not a critical issue but I'd appreciate any comments. Thanks, Jim Hi All, This is my function function outputSelected() { alert(window.opener.document.forms[0].txt11_19.value); alert(window.opener.document.forms[0].rdo11.length); var questionID = document.forms[0].cntQuestion.value; var choiceID = document.forms[0].cntChoice.value; var txtValue = document.forms[0].strEmpNo.value + " " + document.forms[0].strName.value; alert(txtValue); var leftValue = 'window.opener.document.forms[0].txt' + questionID + '_' + choiceID + '.value =' + txtValue; eval(leftValue); } all the alerts work as expected. bu the eval function does not. error: expected ';' any ideas what is happening. or is there any other way of doing this. Hi All, I have a problem in which I try to execute a funcition via a document.write() and it throws an "object expected" error. Overall I am making an interface for MS ACCESS .mdb table via ADODB using JavaScript and I want to be able to click on a link and the id is used to delete that entry. Code: My function is: Code: function deleteRecord(del) { var adoConn = new ActiveXObject("ADODB.Connection"); var adoRS = new ActiveXObject("ADODB.Recordset"); adoConn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = {path to }knowBA.mdb'"); adoRS.Open("Select * From know where ID="+ del, adoConn, 1, 3); adoRS.Delete; adoRS.Close(); adoConn.Close(); } The code using the funcition is - oh and the numric KEY is rs(0) : Code: if(!rs.bof) { document.write("<table width='700' border='1' align='center' cellpadding='2' cellspacing='0' bgcolor='#FFFFFF'>"); rs.MoveFirst() while(!rs.eof) { document.write("<tr><td><div align='center'><strong>"+rs(1)+"</strong></div>"); document.write("<strong>Keyword(s):</strong> "+rs(3)); document.write("<br><strong>Entry:</strong> " +rs(2)+" "); document.write("<A HREF='javascript:onClick=("+"eval(deleteRecord(" +rs(0)+"))"+")'>delete</A> "); document.write("</td></tr>"); cnt=cnt+1; rs.MoveNext() } document.write("</table></form>"); } if (cnt==0){ alert ("Sorry, there are no results on that search.");} rs.close() cn.Close(); } </script> Thanks for any hints on how to accomplish this! I am a Javascript newbie. I'm trying to code a page that has thumbnails of smaller images that when each image is clicked a larger image will load above the thumbnails, plus text within a div will change, plus more Javascript behind a shopping cart button will change. I'm not sure if this is even possible and have been searching and experimenting with the code without success. To view the webpage I'm working on: http://toymakerpress.com/website/Fre.../TestPage.html If you click on the dog image you can see where I'm headed (I also haven't had any luck loading the shopping cart button with it's unique Javascript code). Here is my code so far: The shopping cart button (I would like this code to swap out everytime I load a new image): Code: <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=A0085&cl=82487&ejc=2" rel="nofollow" target="ej_ejc" class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this);"><img src="../images/addtocart1.gif" border="0" alt="Add to Cart"/></a> The code I'm working on for each thumbnail image: Code: <td><div align="center"> <a href="javascript:changeImage('../images/FreePlans/littledog-4Lg.jpg') "javascript:="javascript:"" onClick="load_content('orderform','more content') "><img src="../images/FreePlans/littledog-4.jpg" width="140" height="140" border="0" /></a></div></td> Thanks! Code: var i = 1; var obj = document.createElement("pStretch" + i); obj.id = "pStretch" + i; obj.className='circle_point drag'; eval("pStretch" + i + ".obj = ") = obj; document.body.appendChild(obj); Red does not work. What I want is to store all regarding DOM object into a property of another object named the same as id of that DOM object. What to do to make that work ? Hi for purpose of learning only. Stretching myself by looking at OOP in JSBible. In the book he used a frameset which I hate so I changed to innerHTML. I have two issues A) the code uses eval (highlighted)--- i'd like to not use that but I can't work out how to change it. B) how to show selected ie Earth when the page loads. I've tried loads of ways but just not getting it. here is full code working 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>OOP test PLANETS</title> <style type="text/css"> .highlight{ color:orange; font-weight:bold; } </style> <script type="text/javascript"> //* <![CDATA[ //define method function showPlanet(){ var result = ''; result += "Planet: <span class='highlight'>"+this.name+"</span><br />"; result += "Diameter: <span class='highlight'>"+this.diameter+"</span><br />"; result += "Distance from Sun: <span class='highlight'>"+this.distance+"</span><br />"; result += "One Orbit Around Sun: <span class='highlight'>"+this.year+"</span><br />"; result += "One Revolution (Earth Time): <span class='highlight'>"+this.day+"</span>"; var insert = document.getElementById("myinsert"); insert.innerHTML = result; } function planet(name,diameter,distance,year,day){ this.name = name; this.diameter = diameter; this.distance = distance; this.year = year; this.day = day; this.showPlanet = showPlanet; //showPlanet func now a method of planet } //create new planet objects in series of variables var Mercury = new planet("Mercury","3100 miles","36 million miles","88 days","59 days"); var Venus = new planet("Venus","7700 miles","67 million miles","225 days","244 days"); var Earth = new planet("Earth","7920 miles","93 million miles","365.25 days","24 hours"); var Mars = new planet("Mars","4200 miles","141 millon miles","687 days","24 minutes"); var Jupiter = new planet("Jupiter","88.640 miles","483 million miles","11.9 years","9 hours 50 minutes"); var Saturn = new planet("Saturn","74,500 miles","886 million miles","29.5 yeras","10 hours 39 minutes"); var Uranus = new planet("Uranus","32,000 miles","1.782 billion miles","84 years","23 hours"); var Neptune = new planet("Neptune","2.793 billion miles","165 years","15 hours","48 minutes"); var Pluto = new planet("Pluto","1500 miles","3.67 billion miles","248 years","6 days, 7 hours"); function planetInfo(which){ i = which.selectedIndex; //how to get same result without using eval eval(which.options[i].text + ".showPlanet()"); } //*/// ]]> </script> </head> <body> <h1>Daily Planet</h1> <form> <select name="planetList" id="planetList" onchange="planetInfo(this)"> <option>Mercury</option> <option>Venus</option> <option selected="selected">Earth</option> <option>Mars</option> <option>Jupiter</option> <option>Saturn</option> <option>Uranus</option> <option>Neptune</option> <option>Pluto</option> </select> </form> <div id="myinsert"> </div> </body> </html> ok tell me if I wrote this properly Code: eval('windowBody' + windowCount + '.style.backgroundColor = "black";'); I'm attempting to be able to create multiple windows on my page http://opentech.durhamcollege.ca/~in...rittains/labs/ In context, the following would be applied to an admin-only menu page under the WordPress Dashboard.(e.g. not for public access) Reading MUCH of the evils of eval() however, my use of it below appears nonetheless susceptible to injection attack, and I was hoping for suggestions as to better approach, as I myself am at something of a loss. PHP Code: <!-- as many as 15 of these per page --> <select class='glry_update' id='<?php echo $prd_tbl_id; ?>'> <option value=""> **** </option> <option value="syndicate">Syndicate</option> <option value="rescind">Rescind </option> <option value="feature">Feature </option> <option value="defeature">DeFeature</option> <option value="flag">Flag</option> <option value="deflag">DeFlag</option> <option value='edit'>Edit</option> <option value="drop">Delete</option> </select> PHP Code: //jQuery update of gallery item where $('.glry_update') is a select/dropdown input $('.glry_update').change(function() { var editId = $(this).attr('id');//corrisponds to record_id# in db Ex:"110" var call = $(this).val();//selected value Ex:"flag" $('#itemId').val(editId); //sole input(hidden) in form[editItem] $('#'+editId+' option[value=""]').attr('selected', true); //reuturn 'Select' to default state if(call == 'edit') $('#editItem').submit();// return record detail page for editing if(call == 'drop') { var cnfm = 'Do your really want to delete this item'; if (confirm(cnfm)) drop(editId,'glry'); else return false; } else { var functCall= call+'('+editId+')'; // Ex: flag(110) alert(functCall);return false; // DANGER? --- DANGER! --- DANGER? --- DANGER! --- eval(functCall); // DANGER? --- DANGER! --- // DANGER? --- DANGER! --- DANGER? --- DANGER! --- } }); <p> <script type="text/javascript">// <![CDATA[ var metrics = { "mm" : 1, "cm" : 10, "m" : 1000, "inch" : 25.4, "foot" : 304.8 }; function convert(num, dec){ var val = document.getElementById("fromVal").value; if(isNaN(val)){ return } function roundNumber(num, dec) { var result = Math.round( Math.round( num * Math.pow( 10, dec + 1 ) ) / Math.pow( 10, 1 ) ) / Math.pow(10,dec); return result; } document.getElementById("toVal").value = val * metrics[document.getElementById("fromSystem").value]/ metrics[document.getElementById("toSystem").value]; } var interval = null; function watchChanges(){ interval == null ? setInterval("convert()", 500) : clearInterval(interval); } // ]]></script> </p> <table> <tbody> <tr> <td><input id="fromVal" style="width: 100px;" onfocus="watchChanges()" onblur="watchChanges()" type="text" /><select id="fromSystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select></td> </tr> <tr> <td colspan="1" align="center">=</td> </tr> <tr> <td><input id="toVal" style="width: 100px;" type="text" disabled="disabled" /><select id="toSystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select></td> Hi there, I'm working with leaflet.js to create a web map which is working well so far however I've run into a rookie js problem. I have a js fiddle which shows my code here. The problem I have is that I need convert a string like "polygon" to polygon without the quotation marks. According to the Leaflet API, removeLayer takes an iLayer parameter eg removeLayer( <ILayer> layer ). Currently I'm passing it a string which I feed through eval, I gather is less than ideal. There is a post here on stack overflow but I can't make any sense of the answer unfortunately. If anyone can provide any advice it would be greatly appreciated. Thanks, Rowan Reply With Quote 01-07-2015, 12:50 PM #2 rnd me View Profile View Forum Posts Visit Homepage Senior Coder Join Date Jun 2007 Location Urbana Posts 4,497 Thanks 11 Thanked 603 Times in 583 Posts if you add Code: window.circle=circle; window.marker=marker; window.polygon=polygon; then you can use syntax like layerClicked = window[event.target.value]; instead of eval. you can use a different object than window, as long as it's global and consistent. Code: <HTML> <HEAD> <TITLE>John's JavaScript!</TITLE> <SCRIPT TYPE="text/javascript"> function solve(math) { form.answer.value = eval(math); } </SCRIPT> </HEAD> <BODY> <FORM METHOD="POST"> Enter a JavaScript mathematical expression: <INPUT TYPE="text" NAME="entry" VALUE="" /> <BR /> The result of this expression is: <INPUT TYPE="text" NAME="answer" VALUE="" onFocus="blur()"/> <INPUT TYPE="button" NAME="submit" onClick="solve(form.entry.value)"/> </BODY> </HTML> The only problem I am facing is changing form.answer.value It won't change, why not? Dear all, I'm new with JavaScript, so can please help me with this macro? I need to reload URL (in this case refresh same page) until I don't have word beginning with capitalized A, B or C. I can't find the way to create loop inside EVAL. Can somebody help me please? Thank you! Code: VERSION BUILD=7401110 RECORDER=FX TAB T=1 URL GOTO=http://watchout4snakes.com/CreativityTools/RandomWord/RandomWord.aspx SET !EXTRACT_TEST_POPUP NO TAG POS=1 TYPE=SPAN ATTR=ID:tmpl_main_lblWord EXTRACT=TXT SET !VAR1 EVAL("var re = /^[A || B || C]/gi; var str = \"{{!EXTRACT}}\"; while(str.search(re) == -1) {URL GOTO=http://watchout4snakes.com/CreativityTools/RandomWord/RandomWord.aspx}") PROMPT {{!EXTRACT}} Hi there! I set up a variable that should replace HTML code when run but it doesn't seem to be doing that... Here it is: Code: var finale = "document.getElementById(" + theid + ").innerHTML='test';"; eval("finale"); Any idea why? (My console isn't showing any issues) Thanks! Matt in IE9 Browser list of country names sorting on keys. we are using Ajax javascript: Code: var data= remoteRequest(url); the data like Code: data={" 11":"Australia"," 14":"Bermuda"," CAN":"Canada"," 12":"France"," 15":"Germany"," IND":"India"," 16":"Russia"," 13":"South Africa"," 10":"UK"," USA":"United States"} name_set= eval('('+data+')'); it fine in all browser the array like Code: name_set[11]=Australia name_set[14]=Bermuda name_set[CAN]=Canada name_set[12]=France name_set[15]=Germany name_set[IND]=India name_set[16]=Russia name_set[13]=South Africa name_set[10]=UK name_set[USA]=United States but in the IE9 browser array keys sorting as like. Code: name_set[10]=UK name_set[11]=Australia name_set[12]=France name_set[13]=South Africa name_set[14]=Bermuda name_set[15]=Germany name_set[16]=Russia name_set[CAN]=Canada name_set[IND]=India name_set[USA]=United States so please help me, how to stop the array sorting in IE9. thanks in Advance, Venu Hi folks, Any suggestions on how you might achieve the following without using eval()? I've come up a bit short Code: function addOrSubtract(operator) { var a = 10; var b = 5; var answer = eval(a + operator + b); alert(answer); } addOrSubtract('+') // alerts 15 addOrSubtract('-') // alerts 5 Would help me tidy up some code a lot thanks. An application under development has a set of core functions that carry out common tasks and a 'machine' that animates panels of lists of names and menus and provides another panel for action calls. (see attached pic). Selection of a name identifies object(s) to be worked on and menu couplets like "Name+Edit" call devices (each in a separate js file). Each js file replaces any files in the deviceScript holder in the hta file. I used to use eval(couplet+"Start")() to initiate the device, but having read about the evils of eval it dawned on me that it was unnecessary and just gave each device a start() function ... and also an optional refresh(), and compulsory finish() to pick up results and clean up. This seems to work well on my machine. The hta is intended to run locally picking up json type data and devices locally and via the net and I am concerned that importing js files is just as evil, but isn't it just like opening a web page? Any guidance really appreciated. Chris Hi all, I have a website that allows users to enter complex mathematical formulas into a text field and evaluates them. I am currently using eval() because it not only can handle all the standard mathematical functions, but also gives them access to the Math object. That way the users can use functions such as Math.max() and everything else. I realize, though, that using eval is evil, I assume because a malicious user might throw in some more damaging javascript that would be run without checking it. (That's why eval is evil, right?) Is there a way that I can allow my users to construct complex mathematical formulas and use the Math object (or an equivalent) without potentially opening my site up to harm? Code: <select class="drop" name="pet Display" id="drop" onChange="if(this.options[this.selectedIndex].value=='a') {document.getElementById('myFieldSet').style.visibility='visible'} else{document.getElementById('myFieldSet').style.visibility='hidden'}if(this.options[this.selectedIndex].value=='b') {document.getElementById('myFieldSet1').style.visibility='visible'} else{document.getElementById('myFieldSet1').style.visibility='hidden'}if(this.options[this.selectedIndex].value=='c') {document.getElementById('myFieldSet2').style.visibility='visible'} else{document.getElementById('myFieldSet2').style.visibility='hidden'}"> i need to fix this function or a different (external is better )with the same results thanxz Hi, In ASP.NET intranet web page have user input. Have 5 check boxes with two attending text boxes for each. The default value for the text boxes is zero and the text boxes are disabled for input. When the user checks a check box the two corresponding text boxes become enabled for input. Have two command buttons - Submit for database posting and Cancel. I set the Cancel button with a js window.confirm, uncheck the check boxes, and reset any input values in the text boxes back to zero. When I tested the code the checked check boxes were unchecked and the first text box holding user input was reset to zero value. However, the other text boxes containing user input values were not reset to zero. I altered the sequence of the code - for example - list the check box then its text boxes and so on. I tried listing the text boxes first then the check boxes. These did not resolve the problem - I was thinking linear execution of the code. Any suggestions to rememdy this? This is the js function: function Empty() { var res=window.confirm("Please confirm cancellation-your input will be cleared"); if(res==true) { document.getElementById("chkDVTT").value=""; document.getElementById("chkLM").value=""; document.getElementById("chkVMB").value=""; document.getElementById("chkVEB").value=""; document.getElementById("chkVUB").value=""; document.getElementById("txtDVTTRegHrs").value="0"; document.getElementById("txtDVTTOTHrs").value="0"; document.getElementById("txtBRLMRegHrs").value="0"; document.getElementById("txtBrLMOTHrs").value="0"; document.getElementById("txtVMBRegHrs").value="0"; document.getElementById("txtVMBOTHrs").value="0"; document.getElementById("txtVEBRegHrs").value="0"; document.getElementById("txtVEBOTHrs").value="0"; document.getElementById("txtVUBRegHrs").value="0"; document.getElementById("txtVUBOTHrs").value="0"; } } Thanks, John Hello, I'm working on my little grabber and now I want to try something in javascript without success, so here my javascript code: PHP Code: //begin ajax grabber function validateGrabber(b_on_submit){ if(document.grabber.keywords.value == '' || document.grabber.keywords.value == 'search'){ alert('You did not enter a search term. Please try again.'); if(b_on_submit == 'true') return false; } else{ document.grabber.btn.submit(); } } function grabber(inputGrabber) { if(inputGrabber.length == 0) { // Hide the suggestion box. $('#suggestions').hide(); } else if(inputGrabber.length > 2) { $.post(MELODYURL2+'/ajax_grabber.php', {queryString: ""+inputGrabber+""}, function(data){ if(data.length >0) { $('#suggestions').show(); $('#autoSuggestionsList').html(data); } }); } } // end ajax grabber and that's my template code: PHP Code: <form action="{$smarty.const._URL}/search.php" method="get" id="search" name="grabber" onsubmit="return validateGrabber('true');"> <input name="keywords" type="text" value="" class="search_keywords" id="inputGrabber" {if $smarty.const._SEARCHSUGGEST == 1}onkeyup="grabber(this.value);" onblur="fill();" autocomplete="off"{/if} /> <input name="btn" value="{$lang.submit_search}" type="submit" class="search_bttn" /> <div class="suggestionsBox" id="suggestions" style="display: none;"> <div class="suggestionList" id="autoSuggestionsList"> </div> </div> </form> the first function doesn't show the alert and the second doesn't work at all... |