JavaScript - Assign New Class To A Div To Show Errors If Any.
Hi, im trying to get the errors of an upload form validation displayed in a div.
PHP Code: <div id="error_div" class=""></div> Here is the javascript: PHP Code: <script type="text/javascript" language="javascript"> function validateForm(){ var flag = true; if (document.uploadForm.user_file.value == ""){ alert('No file selected.'); flag = false; } if(flag == true){ if(document.uploadForm.user_file.value.slice(-4) != ".mp3"){ alert('File extension must be mp3 only'); flag = false; } } return flag; } </script> Instead of showing the errors with an alert, i want to show them on the div and at the same time changing its class atribute to Alert, wich is a class i defined on my css page. Mybe with this? PHP Code: document.getElementById(error_div).className='Alert'; Any ideas are welcome, thanks in advance Similar TutorialsHi everyone I have some problems with assigning a class to my included navagation menu. I would like to give the last clicked menu item a active class so I can style it but i have no clue how that works with javascript. as you can see i have three files two pages which included the same menu. Now I would like to set the first page to active because it would be the page the would start. but then when someone clicks the second page it should become inactive and set the active class to the secone link. if that makes sens. Is this possible with javascript? my pages: Page 1 PHP Code: <HTML> <BODY> <?php include "menu.php" ?> PAGE </BODY> </HTML> Page 2 PHP Code: <HTML> <BODY> <?php include "menu.php" ?> PAGE 2 </BODY> </HTML> menu.php PHP Code: <a href="page.php" class="active">page1</a> <a href="page2.php" class="noactive">Page2</a> I'm trying to get a div that is contained within another div to show using jQuery. Basically something like Code: jQuery(document).ready(function(){ $('.outerdiv .innerdiv').show(); }); The only problem is that the first div class isn't always the same, it depends on the URL. I have already set it up so that a var is defined based on the URL, but what I am having trouble with is using that in the show() command. So let's say my var is called "name". I would want to be able to write something sorta like $('.[name] .innerdiv').show(); so that, if the value of the var is (for instance) "jack", it would be as if I wrote $('.jack .innerdiv').show(); but I can't figure out how to properly reference the var within those quote marks. Any help? Hello, I have a complex website designed with Jquerry, javaScript and css. The index.html serves as a client ui for an open source poker game. Much of the css is contained in multiple and imported external css files. The javaScript code is also contained in an external file. The site is completely functional. What I am attempting to do is add a feature to the client that will, through a JavaScript function, dynamically change the visibility element of a class. The classes in question represent the style of the hole cards that a player sees after his cards are dealt. By default they are visible and face up. I would like to change this default behaviour by first changing their visibility element default value to hidden (easy). Then I intend to create a div with onMouseOver and onMouseOut events that will invoke the JavaScript function which will toggle the visibility element value. This will in turn show and hide the hole cards (not easy). I have attempted to use document.getElementById() but without success. After much hacking, I have the feeling that this is not the proper way of directly changing the visibility element value of a class. Here is the relevant class info (how the cards are displayed in the browser) in the external css file Code: .jpoker_table .jpoker_ptable_card_seat00 { width:191px; height:262px; visibility:hidden; z-index:2; position:absolute; top:140px; left:10px; -webkit-transform: scale(1); -moz-transform: scale(1);background-image:url("images/jpoker_table/cards/small-back.png");} .jpoker_table .jpoker_ptable_card_seat01 { width:191px; height:262px; z-index:3; position:absolute; top:190px; left:60px; -webkit-transform: scale(1);-moz-transform: scale(1); background-image:url("images/jpoker_table/cards/small-back.png");} Left alone these classes will display within the contentWrapper div in the browser as the hole cards which are visible and face up. Here is the relevant html associated with the above classes. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript"> //<![CDATA[ var version = {title: "TiddlyWiki", major: 2, minor: 3, revision: 0, date: new Date("Dec 4, 2007"), extensions: {}}; //]]> </script> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--PRE-HEAD-START--> <!--{{{--> <link rel="alternate" type="application/rss+xml" title="RSS" href="index.xml"/> <link href="css/jpoker_seat0.css" rel="stylesheet" type="text/css" /> <!--}}}--> <!--PRE-HEAD-END--> <title> TiddlyWiki - a reusable non-linear personal web notebook </title> <style type="text/css"> #saveTest {display:none;} #messageArea {display:none;} #copyright {display:none;} #storeArea {display:none;} #storeArea div {padding:0.5em; margin:1em 0em 0em 0em; border-color:#fff #666 #444 #ddd; border-style:solid; border-width:2px; overflow:auto;} #shadowArea {display:none;} #javascriptWarning {width:100%; text-align:center; font-weight:bold; background-color:#dd1100; color:#fff; padding:1em 0em;} #peek .jpoker_table .jpoker_action, .jpoker_table .jpoker_action {position:absolute; width:243px; height:54px; top:72px; left:10px; visibility:visible;} </style> <!--POST-HEAD-START--> <!--POST-HEAD-END--> <script type="text/javascript"> </script> </head> <body onload="main();" onunload="if(window.checkUnsavedChanges) checkUnsavedChanges(); if(window.scrubNodes) scrubNodes(document.body);"> <!--PRE-BODY-START--> <!--PRE-BODY-END--> <div id="copyright"> Welcome to TiddlyWiki created by Jeremy Ruston, Copyright © 2007 UnaMesa Association </div> <noscript> <div id="javascriptWarning">This page requires JavaScript to function properly.<br /><br />If you are using Microsoft Internet Explorer you may need to click on the yellow bar above and select 'Allow Blocked Content'. You must then click 'Yes' on the following security warning.</div> </noscript> <div id="saveTest"></div> <div id="backstageCloak"></div> <div id="backstageButton"></div> <div id="backstageArea"><div id="backstageToolbar"></div></div> <div id="backstage"> <div id="backstagePanel"></div> </div> <div id="contentWrapper"> <div id="peek"> </div> </div> <div id="contentStash"></div> <div id="shadowArea"> <div title="MarkupPreHead"> <pre><!--{{{--> <link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml'/> <!--}}}--></pre> </div> I have added the following Jquery code to the external jquery.javascript.js file in my web directory. In the middle is the //showholecards code that I added. I pasted the surrounding code to give an example of the existing code within the file. Code: // // muck (table plugin helper) // jpoker.plugins.muck = { AUTO_MUCK_WIN: 1, AUTO_MUCK_LOSE: 2, templates : { muck_accept: '<div class=\'jpoker_muck jpoker_muck_accept\'><a href=\'javascript://\'>{muck_accept_label}</a></div>', muck_deny: '<div class=\'jpoker_muck jpoker_muck_deny\'><a href=\'javascript://\'>{muck_deny_label}</a></div>', auto_muck: '<div class=\'jpoker_auto_muck\'><div class=\'jpoker_auto_muck_win\'><input type=\'checkbox\' name=\'auto_muck_win\' id=\'auto_muck_win{id}\'></input><label for=\'auto_muck_win{id}\' title=\'{auto_muck_win_title}\'>{auto_muck_win_label}</label></div><div class=\'jpoker_auto_muck_lose\'><input type=\'checkbox\' name=\'auto_muck_lose\' id=\'auto_muck_lose{id}\'></input><label for=\'auto_muck_lose{id}\' title=\'{auto_muck_lose_title}\'>{auto_muck_lose_label}</label></div></div>' }, muckRequest: function(server, packet, id) { if ($.inArray(server.serial, packet.muckable_serials) != -1) { $('#muck_accept' + id).show(); $('#muck_deny' + id).show(); } }, muckRequestTimeout: function(id) { $('#muck_accept' + id).hide(); $('#muck_deny' + id).hide(); }, sendAutoMuck: function(server, game_id, id) { var auto_muck = 0; if ($('#auto_muck_win' + id).is(':checked')) { auto_muck |= jpoker.plugins.muck.AUTO_MUCK_WIN; } if ($('#auto_muck_lose' + id).is(':checked')) { auto_muck |= jpoker.plugins.muck.AUTO_MUCK_LOSE; } server.sendPacket({type: 'PacketPokerAutoMuck', serial: server.serial, game_id: game_id, auto_muck: auto_muck}); server.preferences.extend({auto_muck_win: $('#auto_muck_win' + id).is(':checked'), auto_muck_lose: $('#auto_muck_lose' + id).is(':checked')}); } }; // // showholecards // $("peek").hover( function () { //on hover $("#jpoker_ptable_card_seat00").show(); }, function () { //on hover out $("#jpoker_ptable_card_seat00").hide(); } ); // // cards (table plugin helper) // jpoker.plugins.cards = { update: function(cards, prefix, id) { jpoker.plugins.cards.update_value(cards, prefix, id); jpoker.plugins.cards.update_visibility(cards, prefix, id); }, update_value: function(cards, prefix, id) { for(var i = 0; i < cards.length; i++) { var card = cards[i]; var element = $('#' + prefix + i + id); element.removeClass().addClass('jpoker_card jpoker_ptable_' + prefix + i); if(card !== null) { var card_image = 'back'; if(card != 255) { card_image = jpoker.cards.card2string[card & 0x3F]; } element.addClass('jpoker_card_' + card_image); } } }, update_visibility: function(cards, prefix, id) { for(var i = 0; i < cards.length; i++) { var card = cards[i]; var element = $('#' + prefix + i + id); if(card !== null) { element.show(); } else { element.hide(); } } } }; I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it, I would appreciate it very much if someone else would review this page and give me feedback. Code: <head> <script type="text/javascript"> lastone='empty'; function showIt(lyr) { if (lastone!='empty') lastone.style.display='none'; lastone=document.getElementById(lyr); lastone.style.display='block'; } </script> </head> <body> <!--links--> <a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a> <a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a> <a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a> <a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a> <!--layers--> <div id="divID1" style="display:none;">content1</div> <div id="divID2" style="display:none;">.content2</div> <div id="divID3" style="display:none;">..content3</div> <div id="divID4" style="display:none;">...content4</div> </body> Here is a demo of it in action: http://www.mousegrey.com/layers.html Hello again eveyone it is the new guy with yet again asilly question. OK here goes.... ..... is it posable to have JS assign a sequental value as the ID for rows in a table. As some of you might know I have an MS Excel spread sheet with data in it that I am wanting to load into a web page. I have worked out how to get the data from Excel but I want to create a JS Function that will read the file then create a table using a template like Clone table but I will need each row entered from the Excel file to have a different ID from the prev entry and different than the next entry. Here is an example of what I'm talking about so that I am as clear as I can be. Quote: Function read () { Reads row 1 from Excel file} Function filltemplatetable (){ Take the data from Function read and placed it in a template table that I have created} Function fillmaintable() {Takes the newly created table object and inplant it in the maintable as a row} Function assignrowid () {assign the newly added row to the maintable as ID 1} Loop back to Function read () untill the last row in the Excel file is copied over to the web page. I was hopeing that the loop could creat a sequenchal numbering system that I could use later on for collaps/expand not to mention filtering but I need to make this an onload so that when I update teh Excel spreadsheet this web page will update the changes. I KNOW I KNOW I just droped a chunk on ya'll and I'm not asking for you guys to do the work for me but I am begging for some direction. I wish I had some CODE to show you guys but I don't have any that pertains to this stage in my work because i'm not even sure it is posable if it isn't then I will need to rethink my creation steps. THANKS AGIN in advance I have a randomly generated Language file that corresponds to keys, the reason Ii say randomly generated is that the letter to key values used are not standard assignments. It seems the language coding is DEC in sets of 3 values by 5 .i.e. "248 036 034 036 248" = A "036 084 084 084 120" = a (See attached : ENGLISH-1.txt) How would I assign these values to a sentence lets say: All great : 248 036 034 036 248 ll gre 036 084 084 084 120 t but convert all characters to their correspondnig sets of 5 ? This then needs to get sent to a database where it is interpreted into sets of Binary to turn on and off LEDs' ... I have never worked with Javascript or LED's before, so any help is so appreciated. hey man,i write this code , Code: <html> <head> <script type="text/javascript"> function Do() { winow.location.assign("http://www.google.com"); } </script> <script type="text/javascript"> function replaceDoc() { window.location.replace("http://www.w3schools.com") } </script> </head> <body> <input type="button" value="Google" onclick="Do()" /> <input type="button" value="Replace document" onclick="replaceDoc()" /> </body> </html> i want to see if i click Google button If I assign an array to another variable, any changes to the array change both variables. Is it a pointer instead of a copy? Try this: Code: <script type="text/javascript"> Arr=['a','b','c']; Arr2=Arr; Arr[1]='_'; alert('Array 1: '+Arr); alert('Array 2: '+Arr2); // Both arrays become 'a','_','c' </script> Why's this happen? Is it to be expected? Variables don't do this but it's happening for arrays in IE and FireFox, maybe all others. Hi all, I have a table with two columns, first is a text field (quantity) and second is product description. Then I have a JavaScript code in the header section that calculates total based on quantity X price. Right now, user has to input quantity in the text field in first column. I would like to change the first column to checkboxes, which I know how to do...problem is I don't know how to adjust the JavaScript so that it knows a checked box is equivalent to a value of 1. Here is a sample of the table code which gives me 2 cells (a blank text field, and a description cell of "A"), and the totals field at the bottom of the table: Code: <TR> <TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_A_4.99" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></TD><TD>A</TD> </TR> <TR><TD>TOTAL</TD><TD ALIGN="RIGHT"><INPUT TYPE=TEXT NAME=TOTAL SIZE=10 onFocus="this.form.elements[0].focus()"></TD> And here is the bit of JavaScript that calculates the table: Code: <script language="JavaScript" type="text/javascript"> <!-- function CalculateTotal(frm) { var order_total = 0 // Run through all the form fields for (var i=0; i < frm.elements.length; ++i) { // Get the current field form_field = frm.elements[i] // Get the field's name form_name = form_field.name // Is it a "product" field? if (form_name.substring(0,4) == "PROD") { // If so, extract the price from the name item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1)) // Get the quantity item_quantity = parseInt(form_field.value) // Update the order total if (item_quantity >= 0) { order_total += item_quantity * item_price Any ideas on how to change the item_quantity to always=1 so that I can change the input type from 'text' to 'checkbox'? Then, with this example, if the user were to check the box for "A" the "total" field would say 4.99 Thanks in advance! I'm having problems with selecting values from array. I have a dropdown box where you choose what fruit you want to buy. When selected the array should assign 2 values to that fruit. I don't know how to do that. Here's what I have.. I added comments. Javascript part: Code: <script type="text/javascript"> function Fruits() { var selectfruit = newArray( //assigning values to fruit selected from dropdown box newArray("Banana", 1, 1), newArray("Apple", 1.2, 0.5), newArray("Mango", 1.1, 0.9), newArray("Orange", 0.1, 9.99)); var howmanyfruits = Number(document.getElementById("howmanyfruits").value); // how many fruits are you buying var totalfruitsowned = Number(document.getElementById("totalfruitowned").value); // How many fruits do you already have /* cash and coupons needed to buy fruits. cash is cpst for 1 fruit. coupons is cost for 1 fruit cash_all is cost for all fruits you're buying coupons_all is cost for all fruits you're buying each fruits requires cash AND coupons to be bought. Cash and coupons are tied to the first values in Array. Eg. If you choose Apple that value would be 1.2 The 'fruitsmaxtobuy' variable is not tied to the first value, but the second one in array. If you choose Apple that value would be 0.5. */ var cash = Math.round(((totalfruitsowned * 0.51 * selectfruit) + 700)*10)/10; var coupons = Math.round(((totalfruitsowned * 0.51 * selectfruit) + 850)*10)/10; var cash_all = Math.round((howmanyfruits * cash)*10)/10; var coupons_all = Math.round((howmanyfruits * coupons)*10)/10; var fruitsmaxtobuy = Math.round((totalfruitsowned * 0.12 * selectfruit)*10)/10; /* Display Error if nothing is entered or if you forget to enter total fruits */ if (((howmanyfruits=="" || howmanyfruits==null) && (totalfruitsowned=="" || totalfruitsowned==null)) || ((howmanyfruits==Number(document.getElementById("howmanyfruits").value)) && (totalfruitsowned=="" || totalfruitsowned==null))) {document.getElementById("cash").innerHTML = "Error"; document.getElementById("coupons").innerHTML = "Error"; document.getElementById("cash_all").innerHTML = "Error"; document.getElementById("coupons_all").innerHTML = "Error"; document.getElementById("fruitsmaxtobuy").innerHTML ="Error"} else { document.getElementById("cash").innerHTML = cash; document.getElementById("coupons").innerHTML = coupons; document.getElementById("cash_all").innerHTML = cash_all; document.getElementById("coupons_all").innerHTML = coupons_all; document.getElementById("fruitsmaxtobuy").innerHTML =fruitsmaxtobuy} } </script> HTML part: Code: <form action="" id="fruitcost"> <table align="center" width="37.5%" cellpadding="0" cellspacing="0"> <tbody> <tr> <th colspan="2" align="center">Fruit cost calcultor</th> </tr> <tr> <td>Select Fruit:</td> <td align="center"><select id="selectfruit"> <option>Banana</option> <option selected>Apple</option> <option>Mango</option> <option>Orange</option> </select> </td> </tr> <tr> <td>Total Fruits Owned:</td> <td align="center"><input id="totalfruitsowned" type="text" /></td> </tr> <tr> <td>How many fruits are you buying:</td> <td align="center"><input id="howmanyfruits" type="text" /></td> </tr> <tr> <td>Money Needed to buy 1 fruit:</td><td><font id="cash"></font></td> </tr> <tr> <td>Coupons Needed to buy 1 fruit:</td><td><font id="coupons"></font></td> </tr> <tr> <td>Money Needed:</td><td><font id="cash_all"></font></td> </tr> <tr> <td>Coupons Needed:</td><td><font id="coupons_all"></font></td> </tr> <tr> <td>Nr. of fruits you can buy:</td><td><font id="fruitsmaxtobuy"></font></td> </tr> <tr> <td align="center" colspan="2"><input type="button" value="Submit" onclick="Fruits()" /></td> </tr> </tbody> </table> </form> Hello, I am new with Javascript and running into this problem that I don't understand. I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity): Code: function baseClass() { this.elements = new Array; } function derivedClass() { } derivedClass.prototype = new baseClass; Then I create two instances of the derived class, and add two elements in each: Code: a = new derivedClass(); a.elements.push("A"); a.elements.push("B"); b = new derivedClass(); b.elements.push("C"); b.elements.push("D"); When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays. Note that if instead I use the base class: Code: a = new baseClass(); a.elements.push("A"); a.elements.push("B"); b = new baseClass(); b.elements.push("C"); b.elements.push("D"); then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect. Could someone explain to me the problem with using the derived class? Thank you, Stephanos I have a function that creates a Select dropdown on the fly: function makeForm() { mypara=document.getElementById("paraID"); myform=document.createElement("form"); myselect = document.createElement("select"); theOption=document.createElement("OPTION"); theText=document.createTextNode("Revenue"); theOption.appendChild(theText); myselect.appendChild(theOption); myform.appendChild(myselect); mypara.appendChild(myform); myselect.onchange=TitleOnChange; mybreak=document.createElement("p"); myform.appendChild(mybreak); } function makeForm() { mypara=document.getElementById("paraID"); myform=document.createElement("form"); myselect = document.createElement("select"); theOption=document.createElement("OPTION"); theText=document.createTextNode("Revenue"); theOption.appendChild(theText); myselect.appendChild(theOption); myform.appendChild(myselect); mypara.appendChild(myform); myselect.onchange=TitleOnChange; mybreak=document.createElement("p"); myform.appendChild(mybreak); } I would guess that I have to add something like: theOption.setAttribute("value","1"); I want to be able to call the following function and execute a code base on the selection of the Select Dropdown: <script type='text/javascript'> function TitleOnChange() { if (document.form.select.value == "1") { alert("Value selected on the Select dropdonw is 1"); } } </script> <script type='text/javascript'> function TitleOnChange() { if (document.form.select.value == "1") { alert("Value selected on the Select dropdonw is 1"); } } </script> I don't know why is not working. I assigned the value 1 to the select dropdown theOption.setAttribute("value","1"); I call the TitleOnChange function myselect.onchange=TitleOnChange; And Finally I indicate that if the value is equal to 1 do... view plaincopy to clipboardprint? if (document.form.select.value == "1") { alert("Value selected on the Select dropdonw is 1"); } if (document.form.select.value == "1") { alert("Value selected on the Select dropdonw is 1"); } Does anyone knows why this doesn't work and how could I fix it? Any helpt would be highly appreciate. Thanks i want to assign content of textarea to a div .. like in twitter when you type something and press "Tweet" a div is created and has the content of textarea.. how can i implement it , i know something about getElementById() but not sure how it can help me here hi guys i hava gridview gvcustomers with following fields latitude,longitude,customer and i have a javascript function in my aspx page fucntion Customer() { AddCustomer(lat1,long1)--- row1 of gridview lat long AddCustomer(lat2,long2)--row2 of gridview lat long } in the above function i would like to loop through the gridview and get the latitude and longitude colmns in the function instead of hardcoding as i have been doing now...thank you i advance I am trying to pass data from one form to another form using the url i can get it to come up on the next pages url but how do i get it to go to a text box on the new form. is there a way of assigning text boxes. being trying it in javascript and asp even php would like to keep it to javascript but am open minded to just get it to work EDIT: goto post #7 here goes JS code: (keep an eye on codes of type: document.getElementById('footerX').innerHTML=X Code: function details() { var choo = document.getElementById("choo"); aa = choo.chooserver.value; bb = choo.chooversion.value; if(aa==1) {k=0} else if(aa==2) {k=1} else {k=false} pa= domain[k].getElementsByTagName("server") ; pb=""; pc = domain[k].getElementsByTagName("version"); pd= domain[k].getElementsByTagName("date"); pe= domain[k].getElementsByTagName("month"); pf= domain[k].getElementsByTagName("year"); ta = (bb==1)? " T4 ":(bb==2)? " T3.6 " :(bb==3)? " T2.5 " : 100 ; versions(ta); document.getElementById('footer1').innerHTML='one'; } function versions() { for (i=0;i<=pc.length;i++) { a = pc[i].childNodes[0].nodeValue; b = pa[i].childNodes[0].nodeValue; comparedate(d,g,f); dates(i, a); document.getElementById('footer2').innerHTML='two'; if (a==ta) { addto() document.getElementById("mc"+i).innerHTML= txt ; document.getElementById("md"+i).innerHTML= txt2 ; } document.getElementById('footer3').innerHTML='tee'; } document.getElementById('footer4').innerHTML='fou'; } HTML: Code: <div id = "conten2"> <table id="tb1" border="1px"> </table> </div> <div id = "footer"> feet </div> <div id = "footer1"> feet1 </div> <div id = "footer2"> feet2 </div> <div id = "footer3"> feet3 </div> <div id = "footer4"> feet4 </div> <div id = "footer5"> feet5 </div> Desired Output: feet one two tee fou feet5 Output: feet feet1 two tee feet4 feet5 Area of error predicted: inside the for loop, the statement immediately after loop is not executed once loop ends, nor does it return to original function for execution of other statements which were written after the function containing the loop was called.... Hey. I have a string and I can return say, the fourth letter with output[3], but i can't assign a value to it for some reason: I am trying to make hang man Code: <!DOCTYPE html> <html> <head> <script src="jquery.min.js"></script> <script> $(document).ready(function(){ var word, output, wordLength, stringLength, newLetter, letters; var i, n, k, health, wcheck; word = "word"; output = ""; letters = ""; wordLength = word.length; for(i = 0; i < wordLength; i++){ output += "_"; } $("#inputLetters").keyup(function(){ newLetter = $("#inputLetters").val(); $("#inputLetters").val(""); letters += newLetter; wcheck = false; for(i = 0; i < wordLength; i++){ if(word[i] == newLetter){ wcheck = true; output[i] = newLetter; } } if(wcheck = false){ health++; } $("#letters").html(output + "<br />" + letters); }); }); </script> </head> <body> <span id="letters"> </span> <br /> <br /> <input id="inputLetters" type="text" /> </body> </html> Hello, I'm Stephen Martin, an undergraduate Psychology student and researcher. Although I am a self-proclaimed tech geek, the extent of my knowledge ends abruptly at any sort of coding. I need help from anyone who is willing. The paradigm: I am currently investigating the decision making strategies in a particular population (I cannot reveal too much, lest our study be scooped by competing researchers in the field). The paradigm that we use is built through a package called MouseLabWeb (http://www.mouselabweb.org/). MLWeb basically provides an interface for researchers to create a html/php/js/css website that presents a grid (table). A small example is shown on the aforementioned website. The javascript functions allow each participant's events to be recorded, timestamped, and written to a MySQL database. This allows the researcher to know which cells the participant viewed, in what order, for how long, and ultimately to which decision the participant came. Additionally, the PHP/HTML creates the table, but the data within it is populated by the javascript. This is a blessing and a curse. Here is why. The problem: The javascript offered by MLWeb allows the cells to be randomized. This is necessary, because in such paradigms, counter-balancing is required, otherwise there would be order effects (e.g., people tend to automatically read from the upper left) that are not controlled for. So the order of the columns and rows are randomized, the data which is then placed into the html/php table. For the current study, we want the cells corresponding to particular types of information to be shaded differently. For example, we'd want cells that contain bad information to be dark, cells that contain neutral info to be grey, and cells that contain good information to be white. The problem is that setting these values (style="background-color: #XXXXX) only applies to the table as created by the PHP. It only affects the position, and does not consider the information that it is filled with. We want the information that a cell is filled with to dictate what background-color the cell is. Example of the problem (A,B,C are the different types of info, with the surrounding character implying shading) What we want: Unrandomized: [.A.] [|B|] [#C#] Randomized: [#C#] [.A.] [|B|] What the problem is: Randomized: [.C.] [|A|] [#B#] Again, thank you for reading this long post. I'm up for any suggestions! TL;DR The website uses PHP to render a table and javascript to populate it. Javascript randomizes the column and row order upon each visitation, thus randomizing the cells. How do I make javascript issue a background-color change to each cell according to the information that it is populated with. I have to update the rowid(assigned to checkbox) whenever the textbox value is updated and this needs updating value of document.getElementsByName('rf_select[]') when checkbox value matches the textbox id. There can be mutliple number of rows each with a uniqueID (checkbox value) that matches with the textboxID onload. Code :- <td align="center"><input type='checkbox' name='rf_select[]' id='rf_select' value="rowId" CHECKED border="none"/> <td align="left"><input type='text' name='policy_no' id="rowId" size='25' value="test" onBlur=handleRowId('policy_no'); /></td> <script language="javascript"> function handleRowId(){ var arr = new Array(); var rowarr = new Array(); arr = document.getElementsByName('policy_no'); rowarr = document.getElementsByName('rf_select[]'); for(var i = 0; i < arr.length; i++) { var obj = arr.item(i); //alert(obj.id + " = " + obj.value); for(var j=0; j< rowarr.length; j++){ if(rowarr[j].value == obj.id){ document.getElementsByName('rf_select')[j].value = rowarr[j].value+"#@#"+obj.value; } } } } </script> I am having problem assigning values here - document.getElementsByName('rf_select')[j].value = rowarr[j].value+"#@#"+obj.value; Any help is appreciated. Hi, I was working on this problem that asks me to return an array of scores for each string (only for its content part, not URL) in the global variable, which is an array. For example, alert a score of 0 if the string z is not found, 1 if found once, and 2 for twice. My problem is that I can get the code to alert if it has found the word (ex. "the"), but I cannot manage to : a) Assign separate scores for each string. b) Make the search case insensitive i.e. "the" will appear in 0,1, but not in 2, where it is capitalized I would appreciate any help! [CODE] var c = ["[www.facebook.com] Facebook is the best social networking site to coccent with your friends. ", "[www.google.co.uk] Google is the worldwide search engine. ", "[www.bbc.co.uk] The best news source for starting your day. "]; function findScore(z) { for (var i=0; i<c.length; i++) { var a = c[i].toString(); var b = a.search(z); if(b>-1) { alert (z + " found in array " + i); } } } findScore("the"); [CODE] Sorry for not being able to wrap the code! |