JavaScript - Using A For Loop To Call An Image
Hello, I am trying to use a for loop to call images of custom text. For example, I have images named uppera.png and lowera.png for a custom font. I need the image of the letter to show up as they type into a text area, but also have backspace work correctly to delete the last image added. Here is the code I have thus far:
<script type="text/javascript"> function callimage() { var chars = document.getElementById('userinput').value.split(""); for (i=0; i < chars.length; i++) { if (chars[i] == "A") { var image = "uppera.png"; } if (chars[i] == "a") { var image = "lowera.png"; } ... if (chars[i] == "9") { var image = "9.png"; } document.getElementById('visual').innerHTML = document.getElementById('visual').innerHTML + '<img src="' + image + '"/>'; } } </script> <input type="text" maxlength="20" id="userinput" onkeyup="callimage()"/> <p id="visual"> </p> When I test this out it takes the previously entered text and adds it to the new text and combines them. For instance if you entered "a" it would show up as "a"; if you entered "a" again it would show up as "aaa" and then "aaaaaa" and so on. Also, it will add the existing characters again if any key is pressed, like just shift. I think I would need to write an else statement to fix that part, but I don't know what to put there, either. Any ideas on how I could fix this one? Thanks! Similar TutorialsHi, I have a problem with my script, I have a php request and the result is shown in a div, so there is several divs and their id is the "id" in the database, and I want that if we click on a link, it hides every divs... Here is how I tried to do that: Code: <script type="text/javascript"> function visibilite(thingId) { var targetElement; targetElement = document.getElementById(thingId) ; targetElement.innerHTML = "" ; } </script> Code: $hide = ""; while($ligne=mysql_fetch_array($ress)){ $hide.= "visibilite('$ligne[id]'); "; $return.= "<tr><td>$ligne[heure] - $ligne[fin]</td><td>$ligne[sport]</td><td>$ligne[salle]</td><td>$ligne[ville]</td><td>$dispo/$ligne[place]</td><td><div id=$ligne[id]>"; $return.= "<a href=# onClick=\"maFonctionAjax($ligne[id],$tennis); $hide return false\">Reserver</a>"; $return.= "</div></td></tr>"; } Every div'id is the id in the database, with the onClick we call an ajax function and $hide which is the call for the function visibilite for each div It works for some request, I don't know how is it possible because I can have the same number of results and sometimes it works, and sometimes not... Does somebody can help me? Thanks a lot! Jeff hi i'd like to ask how can i ask for a function inside a for loop , if i remove the loop the code works fine but i need it for 10 rows . please help , here is the code PHP Code: $content .=' <table cellspacing="2" cellpadding="2" border="0" align="center" > <SCRIPT LANGUAGE="JavaScript" type="text/JavaScript"> function doCalcAndSubmit() { // get both values kolicina1 = document.forms["vlez1"].kolicina.value; cena1 = document.forms["vlez1"].cena.value; // do some calculation vkupno1 = kolicina1 * cena1; // set the value in the right field document.forms["vlez1"].vkupno.value = vkupno1; } </script> <form id="vlez1" name="vlez1" method="POST" action="index_execute.php" > <tr valign="middle"> <td></td> <td align="center"><b> Sifra : </b></td> <td align="center"><b> Kolicina : </b></td> <td align="center"><b> Cena : </b></td> <td align="center"><b> Vkupno : </b></td> </tr> '; for($t=1;$t<11;$t++) { $content .= ' <tr valign="middle"> <td>'.$t.'.</td> <td><input type="text" id="sifra" autocomplete="off" name="sifra['.$t.']" align="middle" onblur="normalField(this);" onfocus="fireKeyListener_sifra(event); highlightField(this,1);" onkeyup="getList_sifra(event);" size="25" value="" /></td> <td><input type="text" id="kolicina" name="kolicina['.$t.']" align="middle" size="25" ></td> <td><input type="text" id="cena" name="cena['.$t.']" align="middle" size="25" onblur="doCalcAndSubmit();"></td> <td><input type="text" id="vkupno" disabled name="vkupno['.$t.']" align="middle" size="25" ></td> <input type="hidden" name="hidden_data" value="'.$data.'"> </tr>'; } $content .= '<tr> <td></td> <td></td> <td align="center"><input type="submit" id="submit2" name="submit2" value="Potvrdi" ></td> </tr> </form> </table> '; hey there. the script im trying to write is used to take the values from four separate forms and display an image based on the highest value. it looks like this. Code: <script type="text/javascript"> var val = Math.abs(document.getElementById("mytext1").value); var val2 = Math.abs(document.getElementById("mytext2").value); var val3 etc var val 4 etc var showImg = document.getElementById("image1").src = "default.jpg" document.getElementById("image1").src = "default.jpg" // check + values for right sph if (val >= .25 && val <= 3.5) {document.getElementById("image1").src = "r39.gif"} if (val >= 3.75 && val <= 5.50) {document.getElementById("image1").src = "pol.gif"} // check - values for right cy if (val <= -.25 && val >= -3.5) {document.getElementById("image1").src = "r39.gif"} if (val <= -3.75 && val >= -5.5) {document.getElementById("image1").src = "pol.gif"} // check + values for left sph if (val2 >= .25 && val2 <= 3.5) {document.getElementById("image1").src = "r39.gif"} if (val2 >= 3.75 && val2 <= 5.50) {document.getElementById("image1").src = "pol.gif"} // check - values for left cy if (val2 <= -.25 && val2 >= -3.5) {document.getElementById("image1").src = "r39.gif"} if (val2 <= -3.75 && val2 >= -5.5) {document.getElementById("image1").src = "pol.gif"} etc etc } </script> <input type = "text" id = "mytext1" > <input type = "text" id = "mytext2" /> <input type = "text" id = "mytext3" > <input type = "text" id = "mytext4" > <img src="calculate.gif" onclick="showImg()"> anybody know how i go about getting the highest value checked and the resulting image displayed. thanks in advance. Hi Guys, I am trying to make a change to my website so when someone clicks on the chinese flag image, for example, a function which put the clock forward a few hours. This is what the code I have got at the moment: <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=en'; ?>"><img src="images/uk.gif" title="english" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=zh'; ?>"><img src="images/ch.gif" title="chinese" onclick="chinatime()" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=ja'; ?>"><img src="images/jap.gif" title="japanese" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=kk'; ?>"><img src="images/kaz.gif" title="kazakh" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang='.$most_preferred; ?>">Browser Set</a></td> </tr> <tr> <td colspan="5"> <p class="meta"><span class="date"><script type="text/javascript"> var currentTime = new Date() var minutes = currentTime.getMinutes() var hours = currentTime.getHours() var month = currentTime.getMonth() + 1 var day = currentTime.getDate() var year = currentTime.getFullYear() function chinatime() { hours = hours + 5 } if (minutes < 10) minutes = "0" + minutes document.write(day + "/" + month + "/" + year + " " + hours +":"+minutes) </script> Many Thanks Hi, Firstly, I would like to introduce myself. I am new to the application framework in sencha and JS. Acutally i have to pop an image on click of the text. I checked some of the same codes and wrote this code in sencha javascript. can any one please check what's wrong with this code and let me know how to call this function from html code. function showEditWindow() { var win = new Ext.Window({ title: 'image', width: 100, height: 100, html: '<img src=\"p1.png\"></img>', }); win.show(); return win; }; Basically I want to have a different background image for every time of the day. The function by itself works okay with onclick or onload placed in body. Code: function changesky() { document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x"; } What I want to do is have my background change in addition to a message. So instead of just "Good Morning" text I also want the background to change. Code: if (time>=4 && time<12) { document.write ("<p>Good Morning!</p>"); document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x"; } Tried this, but it didn't work so what's the format for calling a function inside of an if statement? Or what other method should I use to do this? hey, I am trying to rotate 3 images continuously when onmouseover, currently I have a code but this code doesn't rotate continuously and only use 2 images. can you help me develop my code? Code: <SCRIPT LANGUAGE="JavaScript"> loadImage1 = new Image(); loadImage1.src = "http://site.com/secondimage.jpg"; staticImage1 = new Image(); staticImage1.src = "http://site.com/originalimage.jpg"; </script> Code: <a href="" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;"> <img name="image1" src="http://site.com/originalimage.jpg" border=0></a> hi, i want to write a js function which will change images (i have an array of images) on mouse over till the time i have my mouse over the image. i have written function: Code: function changeImage(testImage,source) { var my_array=testImage.split("||"); var actualLen = my_array.length - 2; for (i=0;i<my_array.length;i++) { document.getElementById("lrgPic" + source).setAttribute("src",my_array[i]); setTimeout('',1000); if(i == ( my_array.length - 1 )) { // i = (( my_array.length - 1 ) - i) - 1; // alert(i); } } } but the action i want is: on hovering over the image (location: "lrgPic" in above code) images should keep on changing grabbing the location from array ("my_array" above) and the image change should happen after every sec. i have tried "setTimeout" function; but it's not working as desired. with the code which is commented above.. i want to reset the loop so that images are continuously changed till "onmouseOut" is performed... any clues guys.. how can i improve on this code? with this code.. my script goes in infinite loop.. please help thanks in advance Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. 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? Hello all, I am a newbie to api and I want to bring job website into my site using that job website's api. They provide calling url to the xml api to get response. But I dont to know how to get response through javascript. Can you please help me to call that api through javascript or java? Hope that it is simple to you. Thanks in advance... http://www.zooprinting.com/welcome the section with 5 things that rotate starts with "free design online" i need to make an element like that on my site, and i'm pretty handy at googling until i find the script i'm looking for and making it work, but i can't figure out what in the world to call that. it's commonly used but i just can't seem to get my search terms right. anyone know where i can find said script? I'm trying to implement this 'ajax' script, however i'm getting the following error: function expected line 25. And I'm not the only person who is getting this error message :S How can the code be altered so it will work? Also the script isn't executed when I change onclick in onload :S How come and how can I change it so that it will be executed on launch? http://chriscook.me/web-development/...icking-a-link/ Hello. Started my massive JavaScript career just yesterday and the forums I frequent still lack a proper BB-code hide-tag, so I figured I'd try make it in JavaScript, since HTML is allowed on there. This is what I did: Code: <script type="text/javascript"> function show() { document.getElementById('silHideTextTag').innerHTML='Hidden text!!'; document.getElementById('silHideTextBtn').value='Hide'; document.getElementById('silHideTextBtn').onclick='hide()'; } function hide() { document.getElementById('silHideTextTag').innerHTML=' '; document.getElementById('silHideTextBtn').value='Show'; document.getElementById('silHideTextBtn').onclick='show()'; } </script> <input type='button' id='silHideTextBtn' onclick='show()' value='Show'/> <div id='silHideTextTag'> </div> The button labelled "Show" appears fine, when I click it it becomes "Hide" and the text "Hidden text!!" is shown. However, when I click the button again, nothing happens at all. I don't quite understand where the problem is. Thanks in advance for any clues. Best regards, Zyl hi i'm trying to call a web service from java script code stored NOT in Html but in an extenarl file .js. My code is this: service.useService("http://localhost:10000/WebS_cod_01/WebS_codEurService.asmx?wsdl", "WebS"); Photo = service.WebS.callService("webS_codEurProcessWS" , photoID); checking with Firebug i find this message: "service is not defined" where i'm wrong ? thanks in advance |