JavaScript - Javascript - For Loop Passing Variable To Function
I'm trying to make it so when you click a cell in a table it runs a function based on the value within that cell. With the current code, no matter what cell is clicked, the alert box displays the same number, which is the last number in my array. The variable, princ, is just being overwritten rather than writing code to each the cell with the proper value. Help is appreciated. Thanks.
Code: for(i=0;i<=3;i++){ document.writeln('<tr>'); document.writeln('<th>'+(periodArray[i])+'</th>'); for(j=0;j<=2;j++){ princ = principleArray[j][i]; document.writeln('<td onclick="(calculateInterest(princ,1,1))">$'+principleArray[j][i]+'</td>'); } document.writeln('</tr>'); } function calculateInterest(principle,rate,period){ totalInterest = principle * rate * period; totalLoanCost = principle + totalInterest; alert('Total Interest: '+totalInterest+'\n'+'Total Loan Cost: '+totalLoanCost); } Similar TutorialsThank you in advance if someone can help. I have been banging my head against the wall for hours now. Here is the code: Code: for (var i = 0; i < BS_crm['activityTypes'].length; i++) { var clickFunc = function(){ activityList.showForm( -1, {blockType:[""+BS_crm['activityTypes'][i]['id'], "0"]} ); }; var type = { value: BS_crm['activityTypes'][i]['id'], label: "Add New "+BS_crm['activityTypes'][i]['label'], css: BS_crm['activityTypes'][i]['css']+"_16", onClick: clickFunc }; previewLinks.items.push( type ); } Now, basically what I am doing here is running through one array to create an array of objects, that will be used to create links that will use whatever onClick function I pass it. The problem is that on the second line I need the BS_crm['activityTypes'][i]['id'] to be a value, not a reference. If that line was simply changed to: Code: var clickFunc = function(){ activityList.showForm( -1, {blockType:["3", "0"]} ); }; then everything would work as I need. How can I make this happen? I would really appreciate any help. Thank you again in advance. I have a function which is currently called twice on the same page. Part of the function is to apply an onkeyup event to a created element. The problem is that when the function is called twice the first created element calls the onkeyup function of the second element! table_JD.length-1 = 0 for first element table_JD.length-1 = 1 for second element updateSearch_TC_JD(1) is somehow called from first element! Code: newSearchBox.onkeyup = function() {updateSearch_TC_JD(table_JD.length-1)} Thanks for any help you can provide! Hi, I am having trouble passing the correct id to change the innerHTML. I have a jsp that display people and their address information. There could be several people in the list, so it is in a loop. That part all works good. There is a drop down list with countries in them. Based on the country they select, I want to change some of the text. Here is what I have: Code: <tr> <td class="datashaded" valign="top"><font size="2"><b>Country:</b></font></td> <td class="datashaded" valign="top"> <select tabindex="<%=countryTab%>" name="<%=country%>" size=1" onChange="changeText(this.form.<%=country%>, this.form.<%=addressLabel%>, this.form.<%=zipLabel%>);"> <% for (int i =0; i < countryList.size(); i++ ) { String countryOption = (String)countryList.get(i); String countryVal = bene.getAddress().getCountry(); String selected = ""; if ( countryOption.equalsIgnoreCase( countryVal ) ) selected = "selected"; %> <option value="<%=countryOption %>" <%=selected%> ><%=countryOption%></option> <% } %> </select> </td> </tr> <tr> <td class="datashaded"><div id="addr1"><font size=2><b id="<%=addressLabel%>">Address:</b></font></div></td> <td class="datashaded"> <input size=20 maxlength="50" tabindex="<%=add1Tab%>" name="<%=address1%>" value="<%=address1Value%>" </td> </tr> Everytime through the loop, addressLabel has an index added to it so it is unique - so I can refer to each person separately. Here is the js function: Code: function changeText(sel, txtField1, txtField2) { var selectedValue = sel[sel.selectedIndex].value; if ( selectedValue == "<%=IParticipantConstants.BENEFICIARY_COUNTRY %>") { document.getElementById(txtField1).innerHTML = 'Address:'; document.getElementById(txtField2).innerHTML = 'Zip:'; } else { document.getElementById(txtField1).innerHTML = 'Street or P.O. Box'; document.getElementById((txtField2).innerHTML = 'Postal Code:'; } } When I hardcoded the id= value, not matter which group I changed the country on, only the first one was changing, so I knew I needed unique ids for each group. There is more to the table, but this is the good part. When the onChange fires now, Nothing at all happens. Can anyone see the problem?? Thanks for looking! Hi, I have a DOM click event that creates a <span>. When the user clicks a button, it turns that <span> into a textarea that the user can type a new name in, press enter, and then the span contains the text the user input. Sort of like when you rename a file in Windows Explorer. Anyway, the code is something like this, and I'm wondering if I can use 'area_el' in this way... right now it's giving me the error that area_el is undefined, even though I define it in the function that contains the Event declaration. The first part is the Dom stuff to make it all work. It's not stuff I need to mess with, but I'm putting it here in case it's useful. Code: var Dom = { get: function(el) { if (typeof el === 'string') return document.getElementById(el); else return el; }, add: function(el, dest) { var el = this.get(el); var dest = this.get(dest); dest.appendChild(el); }, remove: function(el) { var el = this.get(el); if(el.parentNode != null) el.parentNode.removeChild(el); } }; var Event = { add: function() { if (window.addEventListener) { return function(el, type, fn) { Dom.get(el).addEventListener(type, fn, false); }; } else if (window.attachEvent) { return function(el, type, fn) { var f = function() { fn.call(Dom.get(el), window.event); }; Dom.get(el).attachEvent('on' + type, f); }; } }() }; The following code defines what happens when the user clicks submit to create a polygon. I also have some variables: Code: var created_area_array = Array(); var createdarea_index = 0; var number_of_areas_saved=0; var currently_renaming=false; Event.add(window, 'load', function() { Event.add('SubmitArea', 'click', function() { if(polyPoints.length>0) add_created_area(); }); }); Finally, where the issue is. I define area_el in the function below, and further down I want to pass it to a function within the "rename" click event, but I get an error that area_el is undefined. Code: function add_created_area() { number_of_areas_saved++; var area_el = document.createElement('span'); var area_el_remove = document.createElement('span'); var area_el_rename = document.createElement('span'); var new_entry = polyPoints; var new_entry_array_index = "Area" + (createdarea_index); var new_entry_array_name = "Area #" + (createdarea_index+1); area_el.innerHTML = '<span class=\"address-text\">' + new_entry_array_name + '</span><br>'; area_el_remove.innerHTML = "<a onMouseOver=\"rollover('address_remove')\" onMouseOut=\"rollout('address_remove')\" style='cursor:pointer;'>" + "<img src=\"images/tabs-icons/normal-address_remove.png\" name='address_remove' title='remove' alt='remove'></a> "; area_el_rename.innerHTML = "<a onMouseOver=\"rollover('area_rename')\" onMouseOut=\"rollout('area_rename')\" style='cursor:pointer;'>" + "<img src=\"images/tabs-icons/normal-area_rename.png\" name='area_rename' title='rename' alt='rename'></a> "; created_area_array[new_entry_array_index] = new_entry; createdarea_index++; Dom.add(area_el_remove, 'CreatedAreas'); Dom.add(area_el_rename, 'CreatedAreas'); Dom.add(area_el, 'CreatedAreas'); Event.add(area_el, 'click', function(e) { if(!currently_renaming) { polyPoints = []; var thePolyPoints = (created_area_array[new_entry_array_index]).toString(); alert(thePolyPoints); //formatting created_area_array[new_entry_array_index] to store as polygon points in the polyPoints array thePolyPoints = thePolyPoints.replace(/[\[\]{}]/g, ""); thePolyPoints = thePolyPoints.replace(/Location/g, ""); //adding the co-ordinates to the polyPoints array thePolyPoints = thePolyPoints.split(","); for(var ctr=0; ctr+1<thePolyPoints.length; ctr+=2) { var location1 = new Microsoft.Maps.Location(thePolyPoints[ctr],thePolyPoints[ctr+1]); polyPoints.push(location1); } var out=""; for(var i=0; i<polyPoints.length; i++) { out += polyPoints[i] + " "; } alert(out); //creating the polygon and searching... if(create_area==true) { drawPolygon(); polygonSearch(); } else if(create_area==false) { document.getElementById('createarea').innerHTML = "<a id='createarea'><span class='create_area' style='color:blue'><strong>Create Area</strong></span></a>"; document.getElementById("mapDiv").oncontextmenu = function(){return false} MouseUpHandlerId = Microsoft.Maps.Events.addHandler(map, "mouseup",MouseUpHandler); MouseDownHandlerId = Microsoft.Maps.Events.addHandler(map, "mousedown",MouseDownHandler); MouseMoveHandlerId = Microsoft.Maps.Events.addHandler(map, "mousemove",MouseMoveHandler); MouseOverHandlerId = Microsoft.Maps.Events.addHandler(map, "mouseover",MouseOverHandler); drawPolygon(); polygonSearch(); create_area=true; } } }); Event.add(area_el_remove, 'click', function(e) { Dom.remove(this); Dom.remove(area_el_rename); Dom.remove(area_el); if(number_of_areas_saved>1) number_of_areas_saved--; }); Event.add(area_el_rename, 'click', function(e) { if(!currently_renaming) { area_el.innerHTML = '<textarea name=\"renaming_area\" id=\"renaming_area\" style=\"width:200px;height:10px;background-color:#DCDCDC; resize:none;font-size:8px;\" onKeyPress=\"return enter_rename(area_el, event)\" maxlength=\"30\"></textarea><br>'; currently_renaming=true; } }); Event.add("createdarea_clear", 'click', function(e) { Dom.remove(area_el_remove); Dom.remove(area_el_rename); Dom.remove(area_el); created_area_array = []; number_of_areas_saved=0; createdarea_index=0; }); } The enter_rename(area_el, event) function that isn't passing in my variable. Code: function enter_rename(area_el, event) { var keyPressed = (event.which) ? event.which : event.keyCode; var current_str = document.getElementById("renaming_area").value; if(keyPressed == 13) { if(current_str.length>0) { if(allSpaces(current_str)==true) { alert("Please enter a meaningful area name."); return false; } else { area_el.innerHTML = '<span class=\"address-text\">' + current_str + '</span><br>'; currently_renaming=false; return true; } } else return false; } else return true; } Making area_el global does not clear the span elements when I click my "createdarea_clear" button, however when it's local, the function works as expected. Every time i click on one of the said elements, it puts "undefined" into the textbox each time i click on an element. it seems to me that the Key_Table[x] is not getting passed correctly. How do i make sure that this is getting passed correctly? Here's my Code: Code: <script type='text/javascript'> // Startup Script if (document.addEventListener) { document.addEventListener("DOMContentLoaded", LoadEventListeners, false); } function LoadEventListeners() { var Key_Table = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"]; // Create event Listeners for the alphabetic keys for(var x = 0; x < Key_Table.length; x++) { Key_Table[x] = document.getElementById(Key_Table[x]); Key_Table[x].addEventListener("click", function(){ InsertChar(Key_Table[x]); }, false); } } function InsertChar(Char) { alert("Char is:" + Char); // Textbox data document.getElementById('TextData').value = document.getElementById('TextData').value + Char; } </script> i, Am developing a webform using PL/SQL. Am using javascript to do some form validation Sample if(a =="") { alert("Please enter the first name"); return false; } else if(b =="") { alert("Please enter the last name"); return false; } else if (y !="Test1") { if (y != "Test2") { if (y != "Test3") { alert("Enter the right text"); return false; } } alert("am wrong outside"); } else if(z =="") { alert("Please fill al the fields"); return false; } it passes till alter("am wrong outside") and executes the procedure but doesnt goes to the last else part. I want it to go the last else part too. Please help. Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, This code is finally working, but for some reason no matter which button i click on, it is always returning "9". It should be firing the alert(x), where x is the x index value for that particular addEventListener Code: .addEventListener('click', function (e) {alert(x);}, Code: <html> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', DOMLoadedEventFunction, false); function DOMLoadedEventFunction () { for(var x = 0; x < 9; x++) { document.getElementById('btn' + x).addEventListener('click', function (e) {alert(x);}, false); } } </script> <body> <input type="button" id="btn0" value="1"> <input type="button" id="btn1" value="2"> <input type="button" id="btn2" value="3"> <input type="button" id="btn3" value="4"> <input type="button" id="btn4" value="5"> <input type="button" id="btn5" value="6"> <input type="button" id="btn6" value="7"> <input type="button" id="btn7" value="8"> <input type="button" id="btn8" value="9"> <input type="button" id="btn9" value="10"> </body> </html> This is just some sample code that i will later turn into an HTML5 File Manager Hi, I'm having one javascript function which will return the variable and I need to pass that variable to command button action.Please find the below code and let me know how I can achieve this. <script> function addEntry(entries) { var uploadedEntry = entries[0].entryId; alert("Uploaded Entry Details::::" + uploadedEntry ); } </script> <h:commandButton tabindex="1" image="../img/submit.gif" action="#{portfolioListing.uploadMediaEntry(uploadedEntry)}" Thanks, Anil Hello Can i pass php Variable into javascript function like this example. PHP Code: <script type="text/javascript"> <!-- function confirmation() { var answer = confirm("are u sure?") if (answer){ window.location = "user.php?action=statusd&uid=".$row['id'].""; } else{ alert("Canceled") } } //--> </script> This ".$row['id']." will be an user id ... link PHP Code: <a href='#' onclick='confirmation(); return false;'>Go</font></a> I have the following code, where I am inputting a word and on clicking the button , i am setting the value of the text box in div class="twit" which is hidden. now I have to access the value of this hidden text box (name=q) using php.Say I want to print using php .How do I do this ? Code: <html <head> <title></title> <link rel="stylesheet" href="search.css" type="text/css" media="screen" /> <script type = "text/javascript"> function gettweet() { document.getElementById("src").value= document.getElementById("searchbox").value; } </script> </head> <BODY> <form align="center"> <div id="top"> <h3>Search </h3> <input type ="text" name="q1" id = "searchbox"\> <input type ="button" value="ClickMe!" id = "b1" onclick="gettweet();"\> </div> <div id= "twit"> <input type ="text" name="q" id = "src"\> <?php ?> </div> </form> </BODY> </HTML> I'm more of an actionscript person but got roped into an html/javascript job. What I need to do, and it shouldn't be that difficult is this: page1.html - there is a yellow button and a red button - if the user clicks on the yellow button I want to set a cookie with the value "yel" then load the next page - if they click the red button set that cookie with the value "red" page2.html - 'onload' i want to read that cookie and load up the main image to match, something like this maybe?... document.mainimage.src='img/main_' + variable + '.png' so that the path would be for example 'img/main_red.png' Any help please? Preferably javascript only and as simple as possible. If you think this would be easier sending that variable in the URL instead of as a cookie please explain. I'm having a very hard time searching for tutorials that are any good and that do exactly this kind of thing. Hi, I have a simple page and a javascript that measure the time the user has spent on a page and I want that variable to pass as a link to another page (php). I'm stuck (rookie) with how to actually pass that on in the link. Here's my code: Code: <?php session_start();?> <html> <head> <script type="text/javascript"> /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: Cody Shaffer :: http://codytheking313.byethost11.com */ var time=1; function timeHere() { time = time + 1; finalTime = time / 10; } </script> </head> <body> <div id="container"> <form id="form1" method="post" action=""> <label>Fill this Data <input type="text" name="1" id="1" /> </label> <p> <label> <input type="submit" name="2" id="2" value="Submit" /> </label> </p> </form> <a href="go/index.html">ads</a> </div> </body> </html> Thanks for the help Hi all, I'm having some trouble with the this... I have a PHP based calendar where the cells will change color depending on the number of clicks.. this all works fine, but is pointless if I can't send the outcome along in an email. I can do this with PHP but first need to get the values into a hidden field. This is what I have: Code: <script type="text/javascript"> function countClicks (obj){ if (!obj.count) { obj.count = 0; } obj.count++; if (obj.count > 4) {obj.count = 1}; if(obj.count == 1){ obj.style.color='#FFFFFF'; obj.style.backgroundColor='#66CC33'; obj.parentNode.style.backgroundColor='#66CC33'; document.getElementById("availability").value='Available'; } if (obj.count == 2){ obj.style.color='#FFFFFF'; obj.style.backgroundColor='#FF0000'; obj.parentNode.style.backgroundColor='#FF0000'; document.getElementById("availability").value='Not Available'; } if (obj.count == 3){ obj.style.color='#FFFFFF'; obj.style.backgroundColor='#FFCC33'; obj.parentNode.style.backgroundColor='#FFCC33'; document.getElementById("availability").value='Working'; } if (obj.count == 4){ obj.style.color='#000000'; obj.style.backgroundColor='#FFFFFF'; obj.parentNode.style.backgroundColor='#FFFFFF'; document.getElementById("availability").value='Not Set'; } } </script> and... Code: echo "<input type=\"hidden\" name=\"availability\" id=\"availability\" value=\"\">"; All I'm trying to do is populate value with either 'available', 'not available', 'working' or 'not set'... however, it is worth noting that each cell may have a different value, e.g. 1 cell might be working while the other is not available... so i need to pass the values of all the cells. Can anyone help me out here. Many thanks, Greens85 I few sites said to (in the js file) put the varible in <%= %> these tags but thats not doing any good. Is there some other part needed to this I'm missing. The javascript I'm using is in a file I included in my VS project.
I have a signup form on a site that does a check on submission of fields to see if they populated and error box if not changes focus to missing field and highlights field name in red. I wanted to improve on its effectiveness as it only checks 2 fields atm and I wanted it to check some dynamic fields as well the fields are associative arrays generated via php as follows:- Code: echo "<select name='nfield[$t]'>\n"; for ($i = 0; $i<count($value2); $i++) { echo "<option value=\"".trim($value2[$i])."\">".trim($value2[$i])."</option>\n"; } echo "</select>"; the javascript is as follows:- Code: function checkForm() { //This is the name of the function if (Form1.password.value == "") { alert("Please enter a Password."); Form1.password.focus( ); document.getElementById('password').style.color="red"; return false; } The field is displayed via php as follows:- echo "<tr><td align='center' id='password'>Password:</td><td><input type='password' name='password' size='10'></td></tr>\n"; So i thought ah easy, i will just add the following checking javascript to check each of the associative arrays as they never change Code: if (Form1.nfield[1].value == "") { alert("Please choose an option for option1"); Form1.nfield["1"].focus( ); //This focuses the cursor on the problem field document.getElementById('nfield[1]').style.color="red"; return false; //This prevents the form from being submitted } if (Form1.nfield[2].value == "") { alert("Please choose an option for option2"); Form1.nfield[2].focus( ); //This focuses the cursor on the problem field document.getElementById('nfield[2]').style.color="red"; return false; //This prevents the form from being submitted } if (Form1.nfield[3].value == "") { alert("Please choose an option for option3"); Form1.nfield[3].focus( ); //This focuses the cursor on the problem field document.getElementById('nfield[3]').style.color="red"; return false; //This prevents the form from being submitted } but this doesn't work, i think it doesn't recognise the nfield[1] syntax, can a javascript guru point me in the right direction ? I also wanted to enhance the form somewhat as atm it only displays one error popup at a time, so if the user has missed out a few fields they will get an initial popup, try and submit again and then get the second popup for the other missing field. Can my code be modified to show a list of the missing fields and highlight all the titles in red (and if possible change the background colour of the input boxes or border the input fields in red etc)? I have two versions of this document. The first version uses only JavaScript and the standard PROMPT(). It works very well, but I would like to insert the name prompt into the page using the input command. For some reason the variable loaded in the HTML statement doesn't get passed to the JavaScript. Any ideas would be appreciated! This is only a small test page. Sorry I don't know about the [code] tag... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> <meta name="created" content="Sat, 10 Sep 2011 19:40:31 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title>Enter golfers name</title> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="script1.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function GetPage(){ document.write("OK") var lab = ""; var result = fullname.toUpperCase(); var word=result.split(" "); fname = word[0] lname = word[1] alpha = lname.slice(0,1); lab = fname.concat("_") lab = lab.concat(lname) if(word[2]){ ext = word[2] lab = lab.concat("_") lab = lab.concat(ext) } var intro = "./Stats_"; page = intro.concat(alpha); page = page.concat("_golfers.html#"); page = page.concat(lab) document.write(page) <!-- window.location.pathname = page } </script> </head> <body> <center> <form action="form_action.asp" method="get"> You can enter the golfersname or select him from the above list.<br><br> <input type="text" name="fullname" /> <button type="submit" onclick="GetPage()">GO</button> </form> </center> <BR><BR><BR> This is the end </body> </html> On my main page, I have a list of item ID's which are assigned variables, the list is concatenated and so the variables are always different. So another thing that gets concatenated is a link, which uses javascript/jquery to open a popout modal window which is another php file called sharepost.php. I want to be able to transfer the php variables from the main page to append them on the end of the sharepost.php URL so I can use $_GET to grab them for use. Here's what I have... not working, but I figured I'd give it a try. Code: <?php //use mysql to loop through some variables $post_id = $setvalue; $member_id = $anothersetvalue; $list .= ' <div> ' . $post_id . ' </div> <div> ' . $member_id . ' </div> <div> <a href="#" class="button" onClick="openup(); return false">Share This Post</a> </div> $the_link = " http://sharepost.php?post_id=' . $post_id . '&member_id=' . $member_id . ' "; '; ?> <HTML> <head> <script> // Displays an external page using an iframe function openup(){ var src = "<?php echo $the_link;?>"; $.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', { closeHTML:"", containerCss:{ height:150, padding:0, width:350 }, overlayClose:true, }); } </script> </head> <body> <?php echo $list;?> </body> </HTML> Hi all, I am new to JS and usually learn by studying code posted online and modify it to have it do what I need. Recently, I used a totaling plugin for an online ordering form which does the below: item1 qty(user input text) * preset price = total price item2 qty(user input text) * preset price = total price item3 qty(user input text) * preset price = total price -------------------------------------------------------- grand total -------------------------------------------------------- The JS code which passes the grandTotal variable is as below: Code: function ($this){ // sum the total of the $("[id^=total_item]") selector var sum = $this.sum(); $("#grandTotal").text( // round the results to 2 digits "₹" + sum.toFixed(2) ); } The problem I have is the above grandTotal displays the final value when put into a table like below: Code: <td align="right" id="grandTotal"></td> But I am unable to make it work by passing it into a variable within the form fields. I would like to do something like this: Code: <input type="text" name="grandTotal" id="grandTotal" readonly="readonly" /> Can somebody please help me fix this? Any help will be greatly appreciated. Thank you. Hello, I am trying to execute a javascript function passed as argument. I am not sure of the exact way to do it. <html> <head> <script type="text/javascript"> var checkLink = function(linkId, enabledFunction){ var linkidObj = document.getElementById(linkId); if(linkidObj.className=="activelinktext" ) { enabledFunction(); return false; } else if(linkidObj.className=="inactivelinktext") { return false; } alert("*inside CheckLink*"+enabledFunction); }; </script> </head> <body> <a class="inactivelinktext" onclick="checklink(this,"javascript:goback();")"> </body> </html> Thanks, -Vijay |