JavaScript - Concat Array In Element
Hi. I'm fairly new to javascript. I have a code where I'm trying to generate scrollx1 through scrollx100. I can get the array to work with doc.write and I can get one concat variable to work in the element but when I combine them it doesn't work. Any suggestions as to what I need to add to this code:
Code: var sp=1; for (sp=1;sp<=100;sp++) { var sx = "scrollx"; var sy = "scrolly"; var thissx = sx + sp; var thissy = sy + sp; theForm[thissx].value = scrollx; theForm[thissy].value = scrolly; } Any help would be much appreciated!! Similar TutorialsHi. I'm fairly new to javascript. I have a code where I'm trying to generate scrollx1 through scrollx100. I can get the array to work with doc.write and I can get one concat variable to work in the element but when I combine them it doesn't work. Any suggestions as to what I need to add to this code: var sp=1; for (sp=1;sp<=100;sp++) { var sx = "scrollx"; var sy = "scrolly"; var thissx = sx + sp; var thissy = sy + sp; theForm[thissx].value = scrollx; theForm[thissy].value = scrolly; } Any help would be much appreciated!! So how do add a dollar sign the the front of total?? Code: total = round_decimals(order_total, 2) total = "$" + total; --------RESOLVED-------- I am trying to make a finance tracker, but for some reason this code will only output the first transaction: Code: <html> <head> <style> tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF} </style> <script type="text/javascript"> var finance={ ls : localStorage, codes : new Array(), getCodes : function (){ finance.codes=(eval("["+finance.ls.code+"]")) return finance.codes; }, dates : new Array(), getDates : function (){ finance.dates=(eval("["+finance.ls.dates+"]")) return finance.dates; }, desc : new Array(), getDescs : function (){ finance.desc=(eval("["+finance.ls.desc+"]")) return finance.desc; }, change : new Array(), getChanges : function (){ finance.change=(eval("["+finance.ls.change+"]")) return finance.change; }, getAll : function(){ var t=new Array(); t[0]=finance.getCodes(); t[1]=finance.getDates(); t[2]=finance.getDescs(); t[3]=finance.getChanges(); return t; }, getRows : function(){ var temp=new Array(); var bal=0; for (i=0;i<finance.getAll()[0].length;i++){ bal+=finance.getAll()[3][i]; var temp3=document.createElement("tr"); var temp4=new Array(); for(a=0;a<6;a++){ temp4[a]=(document.createElement("td")) } temp4[0].innerHTML=finance.getAll()[0][i]; temp4[1].innerHTML=finance.getAll()[1][i]; temp4[2].innerHTML=finance.getAll()[2][i]; temp4[3].innerHTML=((finance.getAll()[3][i]>0)?"":finance.getAll()[3][i]); temp4[4].innerHTML=((finance.getAll()[3][i]<0)?"":finance.getAll()[3][i]); temp4[5].innerHTML=bal; for(i=0;i<6;i++){ temp3.appendChild(temp4[i]); } temp.push(temp3); } for(i=0;i<temp.length;i++){ document.getElementById("fin").appendChild(temp[i]); } } } localStorage.code='" ","1001","DC"'; localStorage.dates='" ","8/30/2010","9/4/2010"'; localStorage.desc='"Starting","Check for Bob","ATM"'; localStorage.change='100,-10,-20'; </script> </head> <body onload="finance.getRows();"> <table id="fin"> <tr><th>Code</th><th>Date</th><th>Description</th><th>Payment</th><th>Deposit</th><th>Balance</th></tr> </table> </body> </html> hahahahaha wow im dumb i forgot that nesting two for statements that use "i" is a nono also i know the code may be sloppy, i am just building it now, i will clean it up later. Im trying to add to each element within an array. In this program I have an existing array which is called aScores. I have copied its contents into another array called aScores using slice. Now Im trying to add the value of variable called classCurve to each element of aCurve using a for loop (see under the Curve Scores functrion section). However, it does not seem to add the two together(e.g 78 + 5). Any advice would be very helpful. Here is my code: Code: <?xml version="1.0" encoding="UTF-8"?> <!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> <title></title> <script> <!-- var aScores = new Array(); //array to hold test scores var aCurve = new Array(); //array to hold test scores with curve var classAveRounded = 0; //average of test scores var howLong = 0; //length of array -- contingent on how many test scores entered //------------------- LoadScores function ----------------------------- function LoadScores() { var classAve = 0; var rawScores = document.getElementById("Scores").value; aScores=rawScores.split(","); //seperate the test scores by comma //alert(aScores[1]); //test to see if they are separated var howLong = aScores.length; //variable to measure how long the array is for(i=0; i<howLong; i++){ aScores[i] = parseInt(aScores[i]); //convert strings to numbers } //alert(aScores[0] + aScores[1]); //test to make sure array contains numbers aScores.sort(sortNumber); //sort the scores from highest to lowest //insert scores from the array into the score text boxes. for (i=0; i<howLong; i++) { document.getElementById("Score" + i).value = aScores[i]; } //total the test scores var total=0; for(i=0; i<howLong; i++) { total += aScores[i]; } //average the total and insert it into the Average textbox(Math.ceil rounds up aveCalc). classAve = total/howLong; classAveRounded = Math.ceil(classAve); document.getElementById("Average").value = classAveRounded; } //------------------- sortNumber function ------------------------------ function sortNumber(a,b){ return b-a; } //------------------- CurveScores function ----------------------------- function CurveScores() { var classCurve = 0; alert(classAveRounded); if(classAveRounded<75) { classCurve=(75-classAveRounded); }else{ classCurve=0; } alert(classCurve); aCurve=aScores.slice(); //alert(aCurve[7]); //test to see if aCurve holds test scores for(i=0; i<howLong; i++) { aCurve[i]=aCurve[i] + classCurve; } // alert(aCurve[0]); //total the curved scores var totalCurvedScores=0; for(i=0; i<howLong; i++) { totalCurvedScores += aCurve[i]; } //average the total and insert it into the CurvedAverage textbox(Math.ceil rounds up aveCalc). curvedAve = totalCurvedScores/howLong; curvedAveRounded = Math.ceil(curvedAve); document.getElementById("CurvedAverage").value = curvedAveRounded; } --> </script> </head> <body> <table border="1"> <tr style="background-color:#F0F0F0; font-size:10pt; font-weight:bold; text-align:center; vertical-align:bottom"> <td>Score</td> <td>Curved</td> <td>Grade</td> </tr> <tr> <td> <input id="Score0" type="text" style="width:60px;text-align:right"/><br/> <input id="Score1" type="text" style="width:60px;text-align:right"/><br/> <input id="Score2" type="text" style="width:60px;text-align:right"/><br/> <input id="Score3" type="text" style="width:60px;text-align:right"/><br/> <input id="Score4" type="text" style="width:60px;text-align:right"/><br/> <input id="Score5" type="text" style="width:60px;text-align:right"/><br/> <input id="Score6" type="text" style="width:60px;text-align:right"/><br/> <input id="Score7" type="text" style="width:60px;text-align:right"/><br/> <input id="Score8" type="text" style="width:60px;text-align:right"/><br/> <input id="Score9" type="text" style="width:60px;text-align:right"/><br/> </td> <td> <input id="CurvedScore0" type="text" style="width:60px;text-align:right"/><br/> <input id="CurvedScore1" type="text" style="width:60px;text-align:right"/><br/> <input id="CurvedScore2" type="text" style="width:60px;text-align:right"/><br/> <input id="CurvedScore3" type="text" style="width:60px;text-align:right"/><br/> <input id="CurvedScore4" type="text" style="width:60px;text-align:right"/><br/> <input id="CurvedScore5" type="text" style="width:60px;text-align:right"/><br/> <input id="CurvedScore6" type="text" style="width:60px;text-align:right"/><br/> <input id="CurvedScore7" type="text" style="width:60px;text-align:right"/><br/> <input id="CurvedScore8" type="text" style="width:60px;text-align:right"/><br/> <input id="CurvedScore9" type="text" style="width:60px;text-align:right"/><br/> </td> <td> <input id="Grade0" type="text" style="width:60px;text-align:center"/><br/> <input id="Grade1" type="text" style="width:60px;text-align:center"/><br/> <input id="Grade2" type="text" style="width:60px;text-align:center"/><br/> <input id="Grade3" type="text" style="width:60px;text-align:center"/><br/> <input id="Grade4" type="text" style="width:60px;text-align:center"/><br/> <input id="Grade5" type="text" style="width:60px;text-align:center"/><br/> <input id="Grade6" type="text" style="width:60px;text-align:center"/><br/> <input id="Grade7" type="text" style="width:60px;text-align:center"/><br/> <input id="Grade8" type="text" style="width:60px;text-align:center"/><br/> <input id="Grade9" type="text" style="width:60px;text-align:center"/><br/> </td> </tr> <tr> <td><input id="Average" type="text" style="width:60px;text-align:right"/></td> <td><input id="CurvedAverage" type="text" style="width:60px;text-align:right"/></td> <td> </td> </tr> <tr> <td><input type="button" value="Load" style="width:60px;font-size:7pt" onclick="LoadScores()"/></td> <td><input type="button" value="Curve" style="width:60px;font-size:7pt" onclick="CurveScores()"/></td> <td><input type="button" value="Grades" style="width:60px;font-size:7pt" onclick="AssignGrades()"/></td> </tr> </table> <div style="position:relative; left:225px; top:-25px; font-size:10pt"> <b>Enter Scores: </b> <input id="Scores" type="text" style="width:250px; font-family:courier new" value="40,46,48,56,62,64,66,70,76,78"/> </div> </body> </html> What I need help with is sorting the [0] of my array. I need it to sort so that if the user puts in his last name, whether its uppercase or lowercase (Adams, adams), it will sort through the list of students I add, and put them in an alphabetic order i.e adams, Adams, cook, Douglas....and so on. Here is the code that I have below for just sorting by last name, which will seperate the lowercase entries from the uppercase entries. That would be the opposite of what I want. I had it sorted so that it would sort the [o], which is where the last name value is located. Any thoughtful help would be appreciated. Code: function Last_names( s1, s2 ) { if ( s1[0] > s2[0] ) return 1; return 0; } function sortLast(form) { StudentsLists.sort( Last_names ); windows(form);//calling the windows function each time the sortLast function is called } Hi, Below is the code which is used to validate the entries on a form(some field are not be left blank). The user gets the msg when he hits the "Check"button. The problem is after the user gets the msg, I am not able to set the focus in the field which is the first element of an error array which stores the info about the fields with errors on this form. Please help. ========================================================== <html> <head> <script type="text/javascript"> function check_alert() { var errors=[]; if (text1.value==""||text1.value==null) { errors[errors.length]="Please enter the Company Name"; } if(text3.value==""||text3.value==null) { errors[errors.length]="Please enter the Address"; } if(text5.value==""||text5.value==null) { errors[errors.length]="Please enter the City"; } if(text6.value==""||text6.value==null) { errors[errors.length]="Please enter the Zip/Costal Code"; } if(text7.value==""||text7.value==null) { errors[errors.length]="Please enter the Country"; } if (errors.length>0) { reportErrors(errors); return false; } else return true; } function reportErrors(errors) { var msg="There are some errors..\n"; var numerror; for (var i=0;i<errors.length;i++) { numerror=i+1; msg+="\n"+numerror+"."+errors[i]; } alert(msg); document.form.element(errors[0]).focus(); } </script> </head> <body onload="text1.focus()"> Company:<input type="text" name="text1" /><br> Division:<input type="text" name="text2" /><br> Address1:<input type="text" name="text3" /><br> Address2:<input type="text" name="text4" /><br> City:<input type="text" name="text5" /><br> State:<select name="state"> <option value= "Alabama" selected>Alabama</option> <option value= "Alaska">Alaska</option> <option value= "Arizona">Arizona</option> <option value= "Arkansas">Arkansas</option> </select><br> Zip/Postal Code:<input type="text" name="text6"/><br> Country:<input type="text" name="text7" /><br> <input type="button" value="Check" onclick="return check_alert()"/> </body> </html> ======================================================= I want to create an array for a religious website that will display a different Bible verse for each day of the year. This is how I incremented each day of the year. Code: var myDate=new Date(); myDate.setFullYear(2011,2,4); myDate.setDate(myDate.getDate()+1); How do I make the connection between the array and the new date as it changes? This is a snippet from the array. Code: var dailyVerseRef=new Array(); dailyVerseRef[0]="Genesis 1:1"; dailyVerseRef[2]="Genesis 1:2"; dailyVerseRef[3]="Genesis 1:3"; dailyVerseRef[4]="Genesis 1:4"; dailyVerseRef[5]="Genesis 1:5"; dailyVerseRef[6]="Genesis 1:6"; dailyVerseRef[7]="Genesis 1:7"; dailyVerseRef[8]="Genesis 1:8"; I used a switch to go through the days of the week, but to go through the days of the year seems more difficult. Hi all. I am having a problem understanding exactly how setInterval and setTimeout work and really need some help. I want to create an array and then print out each element one at a time at one second intervals. I've only been able to come up with something like this, but it just prints the last value of the array after a second. Code: <script type = "text/javascript"> <!-- var myArray = new Array(); for (var i = 0; i < 11; i++){ myArray[i]=i+50; } for (var i = 0; i < myArray.length-1; i++){ setInterval("document.getElementById('here').innerHTML = myArray[i];", 1000); } //--> </script> <div id="here">Stuff here</div> I'm hoping someone can help correct a small problem with this script, which is intended to highlight particular text strings. Background: The script is being used at a MediaWiki site, and is adapted from a working script from Wikipedia (highlightmyname.js). The original script highlights the logged-in user's username (represented by wgUserName). I've made a copy of the script, which you can see in full here, and adapted it to work on a pre-defined array of names, adding: Code: var Admin; var ArrayAdmins = ['Adam', 'Axiomist', 'Matt', 'Steve']; for (Admin in ArrayAdmins) I also replaced each instance of wgUserName with ArrayAdmins[Admin] The problem: is that, instead of highlighting all instances of every element in ArrayAdmins, only the last element listed ('Steve') is being used. So my question is, what change(s) need to be made to apply function highlightmyname to every element in ArrayAdmins? Any help would be hugely appreciated! The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="") { document.getElementById('msn1').style.display='none'; } if(document.getElementById('yahoo1').innerHTML=="") { document.getElementById('yahoo1').style.display='none'; } if(document.getElementById('skype1').innerHTML=="") { document.getElementById('skype1').style.display='none'; } if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">') { document.getElementById('facebook1').style.display='none'; } else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">') { document.getElementById('facebook1').style.display='none'; } else { document.getElementById('fbook-add').innerHTML='Facebook Profile'; } What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init() { // Grab the appropriate div theDiv = document.getElementById('scrollbox'); // Grab all of the links inside the div links = theDiv.getElementsByTagName('a'); // Loop through those links and attach the target attribute for (var i=0, len=links.length; i < len; i++) { // the _blank will make the link open in new window links[i].setAttribute('target', '_blank'); } } window.onload = Init; But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! Hi, (new to javascript) Code: digAudio = document.createElement("audio"); digAudio.setAttribute('src',hypeDocument.documentName()+'_Resources/'+'digging.m4a'); digAudio.id = "diggingAudio"; newAudio = document.getElementById("diggingAudio"); //returns null the audio element is added (I can play the audio) but I can't get it by its id ? thank you I have the following code Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a></td> </div> what i want to do is this: Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a><a href="anotherlink">another_link</a></td> </div> how can i go about achieving this? I am working on a page where the user will select a location from a dynamically generated dropdown list. I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form. For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields. php array creation: Code: if ($row_locations) { while ($row_locations = mysql_fetch_assoc($locations)) { $mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']); } } javascript function - this should create the array and send variables to text fields. Code: function updateAddress() { var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>); { if (comp_id in mail) { document.getElementById('mailto').value=mail.comp_id.mailto.value; document.getElementById('madd').value=mail.comp_id.madd.value; document.getElementById('madd2').value=mail.comp_id.madd2.value; document.getElementById('mcity').value=mail.comp_id.mcity.value; document.getElementById('mstate').value=mail.comp_id.mstate.value; document.getElementById('mzip').value=mail.comp_id.mzip.value; } else { document.getElementById('mailto').value=''; document.getElementById('madd').value=''; document.getElementById('madd2').value=''; document.getElementById('mcity').value=''; document.getElementById('mstate').value=''; document.getElementById('mzip').value=''; } } } Where is this breaking? Thanks in advance. Hello. I am setting up a simple registration page for a community arts project, but I am new to JS and having some issues. Right now I have a list of check boxes like this: Code: <input type="checkbox" id="HA0001" onclick="updateTotal()" /> Wendy Day <input type="checkbox" id="HA0002" onclick="updateTotal()" /> Al Benne <input type="checkbox" id="HA0003" onclick="updateTotal()" /> Julie Steppe What I would like to do is GET the input boxes ID value - which will be different for every checkbox. That value will correspond with a variable of the same name in my javascript code, that will be added or subtracted from the users total cost. So when a box is clicked, I need my variable (called "currentId") to update to the ID value, such as "HA0001" - etc. I was thinking something along the lines of this, but I know it is incorrect: Code: var currentId = document.getElementById.id; All the other add/subtract stuff I will figure out, but I am having a problem getting the ID value from a checkbox when it is clicked. Can anyone help me figure this out? THANKS! -AJ Alright, I need a little help with my javascript. I'm a bit of a novice when it comes to programming so I apologize if this appears trivial. I have an element ID that begins with bb + a randomized number between 1-100,000. This number changes after every action so what I need is a way to retrieve this new value each time and implement it into my code. I can view the number using firebug but I need a way to automate this process. Do any of you have some advice about how I could approach this problem? Hi all i have the following code. Code: $(document).ready(function(){ $("ul, li, a, p, img").hover( function(){ var origBorder = $(this).css("border"); var elementID = $(this).attr("id"); $(this).css("possition", "absolute").css("z-index", "100").css("border", "1px solid red"); }, function(){ $(this).css("border", "none").css("z-index", "1"); } ); }); it is suposed to outline the element that i am hovering over. Yet if I hover over say an <li> it will outline the li and the ul. Any ideas on how to just outline the element im hovering over? Hi, Would someone here please help me with this script. I know I am a complete hack at this, but I need to get it to work. Your help is appreciated. As you can see, based on the if statement, I need to leave the Div element below hidden, or un-hide it. I know the first part works. The second part (after "else" ) is where I am having the problem. Code: <td> <script type="text/javascript"> if ([fieldXX]==1) { document.write("<a href='page1.asp?itemid=1234'><img src='images/btn-choose.gif' border='0' alt='choose button'</a>"); } else { var id = 'hide-buy-btn'; var item = document.getElementById(id); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; } } </script> <div id="hide-buy-btn" class="hidden"> x xother button code x </div> </td> So, I have this javascript that works just fine... But... PHP Code: <script language="javascript"> function addBtn() { element = document.createElement("input"); element.setAttribute("type", 'button'); element.setAttribute("value", 'Track'); element.setAttribute("name", 'element'); element.onclick = function() { alert("Tracking"); }; var btn = document.getElementById("gs-track-btn"); btn.appendChild(element); } </script> <div id="gs-track-btn"></div> How would I target that div if the " gs-track-btn " id was a class? Hi all Not sure how to tackle this. I haven't done any DOM manipulation and this is a tag within a tag. Another thing is submit is Ajax and therefore can be hit many times --- so I guess I need to also check if element already exists. The result comes back from PHP and I think wipes out anything in the result area. I want to create this: Code: <span id="loading"><img src="loading.gif" /></span> Code: <div id="results">which should populate here</div> <script type="text/javascript"> function loading(){ ? </script> <input type="button" name="submit" id="submit" onclick="loading();"/> How do I begin this? Help appreciated. LT oh this is my Ajax just in case what i'm trying to do should be done from here. Code: <script type="text/javascript"> $(document).ready(function() { $('#submit').click(function(){ //Get the values var amount = $('#amount').val(); var from = $('#from').val(); var to = $('#to').val(); var params = "amount=" + amount + "&from=" + from + "&to=" + to; $.ajax({ type: "POST", url: "change.php", data: params, success: function(data){ $('#results').html(data).fadeIn("slow"); } }); }); }); </script> |